关于前端: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 来使一个 i nline-block元素居中，所以能够满足单行文本居中的成果，
• 当文本比拟多时，.text的宽度追随父级容器，因为 text-align:center 会继承上来，所以在 .text 上修复一下即可

形式二

不反对 IE

width:fit-content能够实现元素膨胀成果的同时，放弃本来的 bloc k 程度状态，于是，就能够间接应用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;
}