关于前端: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;
}