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我没敢删……

最后，文章中若有错误，还请不吝赐教，非常感谢。