小技巧:单行文本居中多行文本居左

我们经常会遇到展示一段文本的情况,由于文本内容是后端返回的,根据实际情况或短或长。如果文本长,整体居左比较合适;如果文本较短,居中比较好看。这时候就比较尴尬了,对于前端来说结构就一种,怎么能达到效果呢?

方法是有的,按照常用的思路是通过js计算文字的长度或者容器的高度,动态设置文本内容居中还是居左。

这种方式果然能够实现,但是需要用js来处理,可能会看到页面明显的抖动,而且不便于维护。

更好的办法是直接使用css,具体怎么做呢?

首先,调整文本展示的布局结构:这里把需要展示的文本用两个块级元素包裹起来

1
2
3
4
5
<div class="box">
<p class="inter">
hello
</p>
</div>

设置元素样式:

1
2
3
4
5
6
7
8
9
10
.box {
width: 180px;
border: 1px solid #ccc;
text-align: center;
}

.inter {
display: inline-block; /*关键 */
text-align: left;
}

OK, 达到预期效果。

这种方式的原理非常简单:

外层元素.box是块级元素,这就让整个容器占满整行,内部行内元素居中展示;
内层元素.inter设置成display: inline-block;不会占整行,宽度由内部的文本决定;

当文本不足一行是,.inter的宽度等于文本的宽度,它设置的居左实际表现没有任何差别,.box上设置的居中让内容能够居中;

当文本超过足一行时,.inter能够占居整行并换行,.inter的宽度等于.box的宽度,.inter上面设置的居左表现出来了;