CSS 文字两端对齐的样式怎么写？

前言

这是一个很短的文章，内容也很少，目的其实在于吐槽MDN文档。

需求

实现下图中的样式：

实现

文档结构：

<p>你好</p>
<p>我爱中国</p>
<p>我是谁</p>

第一次尝试

很简单嘛，使用text-align:justify不就行了？

p{
    position:relative;
    width:6em;
    text-align:justify;
}
p:after{
  content:":";
  position:absolute;
  right:-4px;
}

看看效果：

纳尼？让我来看看文档：

justify:The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

这里提醒一句，MDN上的text-align不要看中文版，英文原版要详细。

看文档的意思，justify属性值不能做用在最后一行嘛。难怪没有起做用。

第二次尝试

以前说了看英文原版的文档，好的，我发现了一个很不错的属性值：justify-all。

justify-all:Same as justify, but also forces the last line to be justified.

好东西啊好东西，在justify的基础上新增了对最后一行的做用。赶忙试试：

p{
    width:6em;
    text-align:justify-all;
}

这下应该能够了吧，来看看效果：

蛤，怎么又没用？F12检查看看：

这又是什么操做？属性值竟然无效。我又仔细看了看文档，翻到最后无语了：

大哥，你这啥浏览器都不能用的属性值写了干吗……固然，我只是发发牢骚，这个属性应该是CSS3规范里有可是浏览器没实现而已。

解决方法

折腾了一下子，最后仍是要解决问题的。我发现了一个属性叫text-align-last，它能够控制最后一行的文字对齐。

p{
  position:relative;
  width:6em;
  text-align:justify;
  text-align-last:justify;
}

效果就是文章最开始的图片。

总结

写这篇文章就是想记录一下text-align-last属性及其应用，同时吐槽一下MDN文档。除了文章里说的“废物”justify-all，还有中文版里直接省略justify-all这一不严谨的行为，并且还多了个string属性。

emmmm，我以为英文版可信度更高吧。因此我在中文版中新增了justify-all，string我没敢删……

最后，文章中如有错误，还请不吝赐教，很是感谢。