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

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

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

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

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

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

<div class="box">
    <p class="inter">
        hello
    </p>
</div>

设置元素样式：

.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上面设置的居左表现出来了；