html文本自動換行

word-wrap：

word-wrap的項有：

normal：默認，單詞太長會超出容器寬度

break-word: 自動進行單詞內斷行，文本內容會在邊界換行，長單詞會斷開換行。

把word-wrap配置成break-word後，有長單詞的狀況下，樣式會好不少，不會出現超出容器寬度的問題，可是會發現瀏覽器在一個長單詞在當前行放不下時，會先進行換行，後進行斷詞，這樣會致使上面一行後面會空出一些，以下圖：

這裏this is 後面會空出不少，要解決這個問題，須要用到css3裏面的word-break屬性

word-break:

normal:使用瀏覽器默認的換行規則

break-all:容許單詞內換行

keep-all:只能在半角空格或連字符處換行

將word-break設置成break-all後，以下：

能夠看到this is後面的空白被補上了，因此用word-break不會作單詞過長總體單詞換行的處理。