word-wrap是控制換行的。
使用break-word時(shí)，是將強(qiáng)制換行。中文沒(méi)有任何問(wèn)題，英文語(yǔ)句也沒(méi)問(wèn)題。但是對(duì)于長(zhǎng)串的英文，就不起作用。

break-word是控制是否斷詞的。
normal是默認(rèn)情況，英文單詞不被拆開。
break-all，是斷開單詞。在單詞到邊界時(shí)，下個(gè)字母自動(dòng)到下一行。主要解決了長(zhǎng)串英文的問(wèn)題。
keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí)，不用word-wrap，中文就不會(huì)換行了。（英文語(yǔ)句正常。）


ie下：
使用word-wrap:break-word;所有的都正常。

ff下：
如這2個(gè)都不用的話，中文不會(huì)出任何問(wèn)題。英文語(yǔ)句也不會(huì)出問(wèn)題。但是，長(zhǎng)串英文會(huì)出問(wèn)題。
為了解決長(zhǎng)串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式會(huì)導(dǎo)致，普通的英文語(yǔ)句中的單詞會(huì)被斷開（ie下也是）。

目前主要的問(wèn)題存在于 長(zhǎng)串英文 和 英文單詞被斷開。其實(shí)長(zhǎng)串英文就是一個(gè)比較長(zhǎng)的單詞而已。
即英文單詞應(yīng)不應(yīng)該被斷開那？那問(wèn)題很明顯了，顯然不應(yīng)該被斷開了。
對(duì)于長(zhǎng)串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。
用：overflow:auto; ie下，長(zhǎng)串會(huì)自動(dòng)折行。ff下，長(zhǎng)串會(huì)被遮蓋。


所以，綜上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下沒(méi)有任何問(wèn)題。在ff下，長(zhǎng)串會(huì)被遮住部分內(nèi)容。



通過(guò)樣式來(lái)實(shí)現(xiàn)

style="word-warp:break-word;word-break:break-all"
這兩種只能解決文字自動(dòng)換行
style="width:800;table-layout:fixed;"
圖片自動(dòng)換行,首先得通過(guò)樣式控件表格寬度,唯一不足就是不能動(dòng)態(tài)去改變寬度!

最新評(píng)論