1.在一個(gè)設(shè)定好寬度的div中，當(dāng)我們輸入的中文文字長度超過了設(shè)定寬度時(shí)，會(huì)自動(dòng)換到下一行。但是，如果輸入的是英文字母，那么，無論你div設(shè)定寬度為多少，英文字母都是不換行直接在同一行輸出，導(dǎo)致div的寬度遠(yuǎn)遠(yuǎn)超出設(shè)定的大小

原因：英文字母之間沒有空格的話，它會(huì)默認(rèn)認(rèn)為這是一個(gè)英文單詞，所以單詞就一次輸出不換行

1.1解決辦法：

- word-break:break-all

- word-wrap:break-word

1.2區(qū)別：

- word-break:break-all 內(nèi)容到達(dá)固定寬度處會(huì)自動(dòng)換行，如果該行末端有個(gè)英文單詞很長，則把單詞截?cái)唷?duì)FF無效

- word-wrap:break-word 如果a行末端寬度不夠顯示整個(gè)單詞，它會(huì)自動(dòng)把整個(gè)單詞放到下一行b行 ，而不會(huì)在a行把單詞截?cái)唷Ｈ鬮行整行都不夠一個(gè)單詞寬，則將單詞截?cái)嘁詫?duì)齊。對(duì)FF、IE有效

1.3

- word-break:break-all能很好的讓文本對(duì)齊，顯得整潔，但是100%切斷單詞，易讀性降低

- word-wrap:break-word比較人性化，但行末會(huì)參差不齊

2.一個(gè)定寬的容器，左右padding值20像素，結(jié)果輸入一段文字后（有中文也有英文字符），會(huì)發(fā)現(xiàn)右側(cè)根本就不對(duì)齊，有些地方距離右側(cè)的空白大小也不是20像素，感覺不和諧，設(shè)計(jì)師就希望排列能夠好看一點(diǎn)，右邊要對(duì)齊

其實(shí)呢，要實(shí)現(xiàn)兩端對(duì)齊很簡單，使用text-align:justify

要理解原理，我們首先要搞清楚文本的兩端對(duì)齊聲明text-align:justify起作用的本質(zhì)。首先，大家要知道，text-align:justify是專門為英文設(shè)計(jì)的，用來實(shí)現(xiàn)英文語句的兩端對(duì)齊。注意這里的”是語句的對(duì)齊”。大家應(yīng)該都知道，英文語句是一個(gè)單詞一個(gè)單詞組合而成的，每個(gè)單詞之前使用空格分隔

text-align:justify之所以可以讓英文段落兩端對(duì)齊，那是因?yàn)槊總€(gè)英文單詞之前那個(gè)透明看不見的空格被拉伸了。注意，是空格被拉伸了，對(duì)，只有空格。因此，當(dāng)我們寫下一段洋洋灑灑中文內(nèi)容的時(shí)候，text-align:justify是沒有任何作用的，跟沒設(shè)置沒任何區(qū)別。為什么呢？很簡單，因?yàn)橹形氖且粋€(gè)一個(gè)漢字，漢字之間是沒有空格的，自然也就不能拉伸，自然也就不能兩端對(duì)齊

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

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

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

結(jié)果就是：

會(huì)發(fā)現(xiàn)，每個(gè)中文文字之間都有的空格字符，于是，text-align:justify就能大發(fā)神威，實(shí)現(xiàn)兩端對(duì)齊！

OK，現(xiàn)在兩端對(duì)齊是實(shí)現(xiàn)了，但是，空格字符它也是真實(shí)存在的字符，是會(huì)占據(jù)寬度的。如果放任不管，文字就會(huì)太稀松，閱讀很吃力，會(huì)被當(dāng)bug提出來的，怎么辦呢？

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

總結(jié)

以上是生活随笔為你收集整理的顶宽的div中的英文不能自动换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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