最近在工作項目中接觸到Web界面設計的問題,要實現文字兩端對齊的效果。在網上搜索了一下,差不多都是互相轉帖,用的都是類似的技巧:
text-align:justify;
text-justify:inter-ideograph;
但問題是,我怎么就看不到效果呢?無論是英文還是中文,在IE和chrome下都不起作用。后來,終於在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">中 文 兩 端 對 齊</div><br/> <div class="justify">中 文 兩 端 對 齊<span></span></div>
效果圖:
從效果圖可以看到,除了要在塊級元素加text-align:justify樣式外,還需要在里面加一個空的span元素,並應用樣式。另外,對於中文還必須用空格隔開漢字,否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開,所以沒問題。
總結:網上找的好多根本就沒解決問題,是我自己沒弄對還是真的沒效果?我想請問那些發帖的都親自試驗過嗎?不管怎么樣,總算找的解決辦法了,先記在這里備忘。也希望能給各位朋友一點幫助。歡迎交流。
https://www.cnblogs.com/lzkwin/archive/2012/11/08/2761667.html