先看下圖：

就是一個定寬的容器，左右padding值20像素，結果輸入一段文字后(有中文也有英文字符)，會發現右側根本就不對齊，有些地方距離右側的空白大小也不是20像素，感覺不和諧，設計師就希望排列能夠好看一點，右邊要對齊。

其實呢，要實現兩端對齊很簡單，使用text-align:justify, 之前有寫過“display:inline-block/text-align:justify下列表的兩端對齊布局”，也是屬于text-align:justify的精彩應用；然后配合其他一些小技巧，就能實現任意中英文的兩端對齊排列效果了。

您可以狠狠地點擊這里：中文或英文兩端對齊Demo

我們可以看到，demo頁面上有一段樸實的文字：

然后我們點擊按鈕變身一下，會發現，文字內容乖乖兩端對齊了：

這種對齊效果，IE6/IE7瀏覽器也是支持良好的，例如，下面這個IE7下的截圖：

實現原理

要理解原理，我們首先要搞清楚文本的兩端對齊聲明text-align:justify起作用的本質。首先，大家要知道，text-align:justify是專門為英文設計的，誰叫css是老外發明的呢，用來實現英文語句的兩端對齊。注意這里的，是語句的對齊。大家應該都知道，英文語句是一個單詞一個單詞組合而成的，每個單詞之前使用空格分隔。

text-align:justify之所以可以讓英文段落兩端對齊，那是因為每個英文單詞之前那個透明看不見的空格被拉伸了。注意，是空格被拉伸了，對，只有空格。因此，當我們寫下一段洋洋灑灑中文內容的時候，text-align:justify是沒有任何作用的，跟沒設置沒任何區別。為什么呢？很簡單，因為中文是一個一個漢字，漢字之間是沒有空格的，自然也就不能拉伸，自然也就不能兩端對齊。

怎么辦呢？難道中文就不行了嗎？

當然不是！既然正常的中文文字之間沒有空格，我們自己加一點不就好了。例如下面代碼：

"寧澤濤小鮮肉".split("").join(" ");

結果就是：

會發現，每個中文文字之間都有的空格字符，于是，text-align:justify就能大發神威，實現兩端對齊！

OK，現在兩端對齊是實現了，但是，空格字符它也是真實存在的字符，是會占據寬度的。如果放任不管，文字就會太稀松，閱讀很吃力，會被當bug提出來的，怎么辦呢？

很簡單，我們使用letter-spacing收縮字符間距就可以了。例如demo頁面：

box.style.letterSpacing = "-.15em";

不同字體的letter-spacing負值不一樣，使用em單位呢，可以更智能適配各個font-size的文字。demo使用的微軟雅黑字體，我大致測試了下，-.15em是個挺合適的值，其他字體我就不詳了，你有興趣，可以自己搗騰下。

至此，我們的任意中文英文的兩端對齊效果就實現了。

使用js再總結下就是(假設box是文字容器元素)：

ox.style.textAlign = "justify"; box.style.letterSpacing = "-.15em"; box.innerHTML = box.innerHTML.split("").join(" ");

寥寥3行代碼，我們就大功告成了！

補充于翌日：

上面的方法適用于中文內容，如果段落含有英文片段，會干掉原來的空格，因為三個空格會被當做一個空格距離處理，因此，我們還需要對連續3個空格左下特殊處理，因此代碼進化成：

box.innerHTML = box.innerHTML.replace(/^[/s/uFEFF/xA0]+[/s/uFEFF/xA0]+$/g, "").split("").join(" ").replace(//s{3}/g, " ? ");

歡迎大家閱讀《中文英文左右padding一致兩端對齊實現_js》,跪求各位點評,若覺得好的話請收藏本文，by 搞代碼

搞代碼網(gaodaima.com)提供的所有資源部分來自互聯網，如果有侵犯您的版權或其他權益，請說明詳細緣由并提供版權或權益證明然后發送到郵箱[email?protected]，我們會在看到郵件的第一時間內為您處理，或直接聯系QQ：872152909。本網站采用BY-NC-SA協議進行授權

轉載請注明原文鏈接：中文英文左右padding一致兩端對齊實現_js

總結

以上是生活随笔為你收集整理的css英文左右对齐,中文英文左右padding一致两端对齐实现_js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。