##前言 文本內容總是左對齊，顯得呆板，試試樣式的兩端對齊吧。 ## 探索過程 瀏覽器參照基準：Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and Later.兩端對齊方案基于 text-align:justify 及 text-align-last:justify 實現. * IE實現 :justify最先是作為IE私有屬性實現 > div{ text-align:justify; text-align-last:justify; } * Firefox實現: text-align-last 在Firefox12-17下仍處理實驗支持階段，需加前綴 -moz- >div{ text-align:justify; -moz-text-align-last:justify; } * Chrome, Safari, Opera實現 >div{ overflow:hidden; height:19px; text-align:justify; } div:after{ display:inline-block; content:''; overflow:hidden; width:100%; height:0; } * 總結 Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, 所以這里可以變通實現單行文本兩端對齊對齊，我們知道text-align:justify 不處理塊內的最后一行文本（包括塊內僅有一行文本的情況，這時既是第一行也是最后一行）及被強制打斷的行的兩端對齊，但會處理除此之外的其它行，所以只需要將這里的單行變成多行即可，那么我們可以使用偽對象的方式派生出新行，這樣不需要額外處理html代碼，然后再將派生出的新行隱藏 ## 最終成果 ``` css //以下代碼親測可用，只要瀏覽器支持偽元素即可 .text-justify{ text-align:justify; text-align-last:justify; } .text-justify:after{ display:inline-block; content:''; width:100%; } ```