短標題自動兩端對齊

前幾天在交流羣裏碰到了這樣的一個問題「怎樣讓下圖這組短名字保持長度一致，兩端對齊呢？」

我在百度上查閱了一些文章，可是通過測試基本都沒成功，最後找到一個可用的，並推理了一下原理，下面來跟你們分享一下。

解決這個問題的就是它：

text-align: justify;
text-align-last:justify;//IE

直接使用這個屬性通過測試在Chrome,Firefox,IE 都是不生效的。
由於這個方法只對兩行等以上的文字生效，單行不生效，若是想要這個方法生效的話，須要僞元素「::after」配合使用 (css代碼以下)：

element::after {
    content:'';
    width:100%;
    display:inline-block;
}

下面說一下我我的推測的原理：

content：''

是爲了讓元素生效，內容爲空，實際上他是存在的，可是不可見，能夠被瀏覽器識別。

width:100%

是爲了讓僞元素寬度和父元素相同並單獨佔滿一行。

display:inline-block;

特地寫上這句話是由於text-align: justify;只對inline或inline-block元素生效，可是在實際開發中，咱們是沒法避免元素多是block塊級元素的，因此才加上了這一屬性。

總結下來也就是說，僞元素::after 本身獨佔了一行使瀏覽器認爲該元素不是一行文字，而是兩行，因此text-align: justify;就生效了。

其餘一些問題：
一、在寫demo時發現，若是瀏覽器是Chrome的話，單獨寫text-align: justify;並不生效，
可是單獨寫text-align-last:justify;就生效了，而且不寫僞元素也能夠，具體什麼緣由不知道，可是不建議使用，由於查閱資料發現 text-align-last:justify; 是針對IE瀏覽器的（雖然測試的時候他也沒生效吧）。

二、若是按照上面的僞元素方法在chrome中使用的話是能夠生效的，可是在Firefox中又不生效了，是由於在firefox中須要這樣寫

<p>你 好 世 界</p>

也就是每一個字中間須要打上空格若是直接寫 「你好世界」 也是不生效的（當時搞得人是一頭霧水啊），因此仍是建議在chrome中也可使用中間打上空格的這樣 Chrome,Firefox,IE 均可以同時生效。

這個問題也是我找到生效的樣式看代碼推理來的，若是哪位大神有發現個人原理是錯誤的，但願能夠指正並一塊兒交流。