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