完美 全兼容 解決 文字兩端對齊 justify 中文姓名對齊

text-align:justify; 所有瀏覽器都支持，text-justify之類的卻只有IE支持，就不要考慮了。

justify我的理解，使元素內部的子元素兩端對齊，子元素當然只能是inline或inline-block。但justify對最后一行是無能為力的。我們在對齊姓名時，因為只有一行，當作最后一行，所以不會兩端對齊的效果。

姓名對齊我們比較常用的是 （半個中文空格）， （一個中文空格）來添充兩個字，三個字的姓名，使包括四字的姓名都能對齊。例如：

---

 

歐陽大咖

張 小 三

王  五 

---

 

但我們發現大部分瀏覽器是正常的，但不幸的是我們發現手機瀏覽器打開大部分是不行的，效果就像下面那樣對不齊。

---

 

歐陽大咖

張 小 三

王  五 

---

 

所以就想到了用text-align:justify;但怎么解決單行不能兩端對齊呢，思路就是：

　　讓瀏覽器認為這不是最后一行就行了

      在元素里面加一個會換行的空的子元素比如:

<i style="display:inline-block;width:100%;height:0;"></i>

 

例子：html結構

                <ul class="arter">
                    <li><span>作品名稱<i></i></span>：  寶貝兒</li>
                    <li><span>作品類型<i></i></span>：  油畫</li>
                    <li><span>藝術家<i></i></span>：  張玉瀛</li>
                    <li><span>風格<i></i></span>：  超現實</li>
                    <li><span>材質<i></i></span>：  布面油畫</li>
                    <li><span>題材<i></i></span>：  人物</li>
                    <li><span>創作時間<i></i></span>：  2011</li>
                    <li><span>所在位置<i></i></span>：  華東</li>
                    <li><span>尺寸<i></i></span>：  78x78cm</li>
                </ul>

scss

　　　　　　　　　li{font-size:14px;line-height:24px;color:#4a4a4a;
                    span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;
                         i{display:inline-block;width:100%;height:0;}
                    }
                }

效果

幾點注意事項：

1）span要設置為inline-block;才能和后面的字同行顯示，同時設置width才會使<i>換行；

2）必須要設置span元素的height，和overflow:hidden否則<i>還是會占高度；

3）vertical-align:top;可以使，li內的span和后面的字，高度對齊，否則會變成