CSS 单行文字居中显示，多行文字左对齐

单行文本

多行文本

css实现方式

方式一

兼容性很好

html

<div class="content">
    <span class="text">这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</span>
</div>

css

.content {
    text-align: center;
}

.text {
    display: inline-block;
    text-align: left;
}

大概原理如下：

对于一个元素，如果其display属性值是inline-block，那么其宽度由内部元素决定，但永远小于“包含块”容器的尺寸，也就是“包裹性（shrink-to-fit）”

可能这样描述的不够直观，来上述的案例简单来讲

• 当文本比较少时，.text的宽度跟随文本，然后我们可以使用父级text-align:center来使一个inline-block元素居中，所以可以满足单行文本居中的效果，
• 当文本比较多时，.text的宽度跟随父级容器，由于text-align:center会继承下去，所以在.text上修复一下即可

方式二

不支持IE

width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

html

<p class="text">这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</p>

css

.text {
    width: fit-content;
    margin: 0 auto;
}

方式三

前一种方式width:fit-content很有效，IE不支持怎么办呢？其实默认display已经有这种特性了，当display属性值是table，元素会表现出和width:fit-content的效果，既支持宽度跟随内部元素，又支持水平方向上margin居中

html

<p class="text">这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左</p>

css

.text {
    display: table;
    margin: 0 auto;
}