1.在一個設定好寬度的div中，當我們輸入的中文文字長度超過了設定寬度時，會自動換到下一行。但是，如果輸入的是英文字母，那么，無論你div設定寬度為多少，英文字母都是不換行直接在同一行輸出，導致div的寬度遠遠超出設定的大小

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

1.1解決辦法：

- word-break:break-all

- word-wrap:break-word

1.2區別：

- word-break:break-all 內容到達固定寬度處會自動換行，如果該行末端有個英文單詞很長，則把單詞截斷。對FF無效

- word-wrap:break-word 如果a行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行b行 ，而不會在a行把單詞截斷。若b行整行都不夠一個單詞寬，則將單詞截斷以對齊。對FF、IE有效

1.3

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

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

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

其實呢，要實現兩端對齊很簡單，使用text-align:justify

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

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

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

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

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

結果就是：

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

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

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

總結

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

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