实现单行文本的左右对齐

今天碰到了一个问题，如何让只有一行的文本进行左右对齐。对于英文文本，左右对齐的效果如下所示：

左右对齐的段落

上述效果是使用text-align: justify来实现的。可以看到除了最后一行之外，段落的其余部分都是左右对齐的。如果我们将text-align: justify样式直接应用在单行的文本上时，将会像上面段落的最后一行，仅仅是向左对齐。可以看一下下面的例子：

代码：

<p id="justify-para">这是一行没有左右对齐的文本</p>

<style type="text/css">
#justify-para {
    background-color: #ccc;
    width: 400px;
    text-align: justify;
}
</style>

结果：

一行没有左右对齐的单行文本

对于汉字文本，因为汉字的等宽特点，文本左右对齐的效果就是每个汉字间的间隔相等。为了实现这一效果，需要利用:after伪元素，在文本之后添加一个不可见的元素，如下所示。

#justify-para:after {
  content: "";
  display: inline-block;
  width: 100%;
}

最终效果：

左右对齐的单行文本

这样就实现了单行文本的左右对齐效果。

---

参考资料

CSS – One Line Justify