text-align:justify; 所有瀏覽器都支持，text-justify之類的卻只有IE支持，就不要考慮了。
justify我的理解，使元素內部的子元素兩端對齊，子元素當然只能是inline或inline-block。但justify對最後一行是無能為力的。我們在對齊姓名時，因為只有一行，當作最後一行，所以不會兩端對齊的效果。
姓名對齊我們比較常用的是 （半個中文空格）， （一個中文空格）來添充兩個字，三個字的姓名，使包括四字的姓名都能對齊。例如：
歐陽大咖
張 小 三
王 五
但我們發現大部分瀏覽器是正常的，但不幸的是我們發現手機瀏覽器打開大部分是不行的，效果就像下面那樣對不齊。
歐陽大咖
張 小 三
王 五
所以就想到了用text-align:justify;但要怎麼解決單行不能兩端對齊呢，思路就是：
讓瀏覽器認為這不是最後一行就行了
在元素裡面加上一個會換行的空的子元素例如:
<span style="color: #0000ff;"><</span><span style="color: #800000;">i </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="display:inline-block;width:100%;height:0;"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>
登入後複製
範例：html結構
<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="arter"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品名称<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 宝贝儿<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品类型<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>艺术家<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 张玉瀛<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>风格<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 超现实<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>材质<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 布面油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>题材<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 人物<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>创作时间<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 2011<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>所在位置<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 华东<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>尺寸<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>： 78x78cm<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>登入後複製
scss
<span style="color: #800000;"> li</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#4a4a4a</span>;<span style="color: #ff0000;">
span{height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">65px</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">justify</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">top</span>;<span style="color: #ff0000;">
i{display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
}
}</span>登入後複製
效果
幾點注意事項：
1）span要設定為inline-block;才能和後面的字同行顯示，同時設定width才會使換行；
2）必須要設定span元素的height，和overflow:hidden否則還是會佔高度；
3）vertical-align:top;可以使，li內的span和後面的字，高度對齊，否則會變成
