兩端對齊實現
一般加上下面2行就可實現
display: inline-block;text-align: justify;
但是對於中英文混雜的情況，中英文難一起實現對齊，原因在下面有分析，需要如下js來控制
var ppp = document.getelementbyid("
ppp"
);ppp.innerhtml =ppp.innerhtml.split("").join(" ");
justify實現原理
要理解原理，我們首先要搞清楚文字的兩端對齊聲明text-align:justify起作用的本質。首先，大家要知道，text-align:justify是專門為英文設計的，誰叫css是老外發明的呢，用來實現英文語句的兩端對齊。注意這裡的，是語句的對齊。大家應該都知道，英文語句是乙個單詞乙個單詞組合而成的，每個單詞之前使用空格分隔。text-align:justify之所以可以讓英文段落兩端對齊，那是因為每個英文單詞之前那個透明看不見的空格被拉伸了。注意，是空格被拉伸了，對，只有空格。因此，當我們寫下一段洋洋灑灑中文內容的時候，text-align:justify是沒有任何作用的，跟沒設定沒任何區別。為什麼呢？很簡單，因為中文是乙個乙個漢字，漢字之間是沒有空格的，自然也就不能拉伸，自然也就不能兩端對齊。
通過**：ppp.innerhtml = ppp.innerhtml.split("").join(" ");讓每個文字之間都有空格字元，於是，text-align:justify就能大發神威，實現兩端對齊。
兩端對齊是實現了，但是，空格字元它也是真實存在的字元，是會佔據寬度的。如果放任不管，文字就會太稀鬆，閱讀很吃力，會被當bug提出來的，怎麼辦呢？
很簡單，我們使用letter-spacing收縮字元間距就可以了。
ppp.style.letterspace = '-.15em';
總結：
box.style.textalign = "justify";box.style.letterspacing = '-.15em';
box.innerhtml = box.innerhtml.split("").join(" ");
如果段落含有英文片段，會乾掉原來的空格，因為三個空格會被當做乙個空格距離處理，因此，我們還需要對連續3個空格左下特殊處理，因此**進化成：
box.innerhtml = box.innerhtml.replace(/^[\s\ufeff\xa0]+|[\s\ufeff\xa0]+$/g, '').split("").join("
").replace(/\s/g, "
");
CSS中英文完美保證兩端對齊
text align justify text justify inter ideograph 語法 text justify auto distribute distribute all lines distribute center last inter cluster inter ideogr...
string中英文本元
在c 中字串類的string的模板原型是basic string template class elem,class traits char traits elem class ax allocator elem class basic string 第乙個引數 elem表示型別。第二個引數trai...
css實現文字兩端對齊
實現如下效果 css 實現如下 第一種方案 oldprice label oldprice label after active lists nowprice active lists nowprice label active lists nowprice points 原價 50元 首單價200...