現象
在html頁面中，有一個限制了寬度的div，在div中分別寫入中文文字和英文字母以及數字，可以看到兩種不同現象。
- 中文內容的div
<div style="width:100px;border:1px solid;">這是一大段中文，發現中文竟然可以自動換行</div>
顯示如下：
- 英文和數字內容的div
<div style="width:100px;border:1px solid;">aaaaaaaaaa123213123098098asdfddddddddddd</div>
顯示如下：
發現
在指定了寬度的div中，對于中文內容，瀏覽器會自動換行以適應寬度。對于英文及數字，則不會自動換行。
針對英文和數字的解決方案
使用css，顯示地控制內容根據div寬度自動換行。
div{
width: 200px;
word-wrap: break-word;
}
為什么會這樣
word-wrap是css3屬性。可用的值有normal | break-word;
normal: 只在允許的斷子點換行（瀏覽器保持默認處理）
break-word: 在長單詞或URL地址內部進行換行
可見瀏覽器對限制寬度div的內容換行，是根據默認的斷字點進行的，中文的斷字點估計一個文字就是一個點，對于英文，如果是一連串的字符，瀏覽器可能認為這是一個長單詞，所以不予換行。 所以就導致了上述的現象，而在實際應用中，我們是不大可能寫一堆連續不斷的無意義字符串的，英文單詞也會以空格隔開，這樣，瀏覽器依然可以對英文和數字內容換行。
如下代碼，不加word-wrap樣式，正常的英文內容依然可以自動換行
<div style="width:100px;border:1px solid">hello world! look, the browser word-wrap .</div>
