轉(zhuǎn)自http://www.cnblogs.com/lzkwin/archive/2012/11/08/2761667.html

最近在工作項(xiàng)目中接觸到Web界面設(shè)計(jì)的問(wèn)題，要實(shí)現(xiàn)文字兩端對(duì)齊的效果。在網(wǎng)上搜索了一下，差不多都是互相轉(zhuǎn)帖，用的都是類(lèi)似的技巧：

text-align:justify;
text-justify:inter-ideograph;

但問(wèn)題是，我怎么就看不到效果呢？無(wú)論是英文還是中文，在IE和chrome下都不起作用。后來(lái)，終于在StackOverflow上找到解決方法了。

樣式：

div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}
div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }

HTML：

<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 兩 端 對(duì) 齊</div><br/>
<div class="justify">中 文 兩 端 對(duì) 齊<span></span></div>

效果圖：

從效果圖可以看到，除了要在塊級(jí)元素加text-align:justify樣式外，還需要在里面加一個(gè)空的span元素，并應(yīng)用樣式。另外，對(duì)于中文還必須用空格隔開(kāi)漢字，否則也沒(méi)有兩端對(duì)齊的效果。英文每個(gè)單詞都有空格隔開(kāi)，所以沒(méi)問(wèn)題。