likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 38

单行文本

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

多行文本

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;
}