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我沒敢刪……

最後，文章中如有錯誤，還請不吝賜教，很是感謝。