css之文本兩端對齊的兩種解決方法

css之文本兩端對齊的兩種解決方法

　　提及文本對齊，你們都知道text-align，最經常使用的有left、right、center，今天咱們說一下justify，也就是文本兩端 對齊。提及來簡單，可是有些小坑你們仍是要注意的。

　　如今咱們有上圖兩行文本，實際開發中咱們常常會遇到這樣的情景：須要把姓名和電話號碼這兩段文字對齊。咱們天然會想到 text-align: justify; 我也是這麼想的，咱們來試一下：

　　刷新一下瀏覽器，爲何沒有效果呢？

　　緣由是 justify 對最後一行無效，而咱們的 name 只有一行，固然也就無效了。那咱們怎麼解決這個問題呢？

　　咱們能夠想到，既然justify對最後一行無效，那咱們增長一行就行了，只要讓它不是最後一行不就ok了？固然咱們增長的一行可不能被人看到。這裏，咱們想到了僞元素。

　　增長沒有文字的一行，咱們來看看頁面：

　　很不錯，明顯已經達到了要求。可是，這樣寫會不會太麻煩了呢，程序員都是講究高效率（懶）的人，若是能用一句代碼就完成的話，豈不樂哉？

　　別說，真有。這裏安利一個新屬性 text-align-last ，廢話很少說，直接上代碼：

　　一句代碼達到需求。

　　真好，真好。