案例如下：

混合使用漢字和英文的段落默認(rèn)如下：

兩邊是不對(duì)齊的(一般情況下，我們對(duì)這種情況不做處理，除非需求或者設(shè)計(jì)非要我們實(shí)現(xiàn)兩端對(duì)齊)。

?

對(duì)齊之后如下：

實(shí)現(xiàn)思路

一般的兩端對(duì)齊是使用text-align:justify，但是text-align:justify一般情況下只針對(duì)英文管用。（因?yàn)閏ss是老外設(shè)計(jì)的，老外在justify判斷的時(shí)候，是根據(jù)單詞直接的空格來的，中文兩個(gè)漢字之間沒有空格，所以大部分情況下text-align:justify不管用，所以這個(gè)屬性大部分形同虛設(shè)！）。

解決辦法

步驟一 ：就是在漢字之間添加空格，然后再去除空格來實(shí)現(xiàn)。

添加空格我們用js來實(shí)現(xiàn)，先split然后再join就可以了！

代碼如下：

"某某某某haorooms博客".split("").join(" ");

步驟二：添加空格之后，字間隙變大，會(huì)很難看，然后我們?cè)谟胏ss的letter-spacing屬性，進(jìn)行相應(yīng)的縮進(jìn)。

代碼如下：

letter-spacing: -0.15em;

這樣就達(dá)到了兩端對(duì)齊的效果。

總結(jié)

按照上面的思路，總結(jié)起來，用jquery實(shí)現(xiàn)代碼如下：

$("#haorooms").css({"text-align":"justify","letter-spacing":"-0.15em"}); $("#haorooms").html()=$("#haorooms").html().split("").join(" ");

注釋

-0.15em這個(gè)值可以指定，根據(jù)你當(dāng)前的便宜來設(shè)置，-0.15em值是經(jīng)驗(yàn)所得！em是一個(gè)單位

當(dāng)然，也可以用純js來實(shí)現(xiàn)這個(gè)效果！代碼如下：

var box=document.getElementById("haorooms"); box.style.textAlign = "justify"; box.style.letterSpacing = '-.15em'; box.innerHTML = box.innerHTML.split("").join(" ");

轉(zhuǎn)載請(qǐng)注明：前端錄?css段落文字（中英文混雜）實(shí)現(xiàn)兩端對(duì)齊

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=14-302-2"></script>

總結(jié)

以上是生活随笔為你收集整理的css段落文字（中英文混杂）实现两端对齐的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。