自動換行
阿新 • • 發佈：2017-08-06
.com css col 支持 height orm 兩種 也不會 color
css3中有兩個處理文本溢出的屬性
word-wrap:允許長單詞或 URL 地址換行到下一行，值可以是normal,break-word
word-break:規定自動換行的處理方法，值可以是normal,break-all,keep-all
當不做任何處理時，谷歌瀏覽器默認的顯示效果如下：
<div style="width: 200px; height: 200px;background-color: darkgrey;"> word-wrap屬性允許長單詞換行到下一行 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 11111111111111111111111111111111</div>
設置
word-wrap: normal
只在允許的斷字點換行，此時瀏覽器保持默認處理，沒有任何變化
設置
word-wrap: break-word
此時會在長單詞的內部進行換行，顯示效果如下：
word-wrap為break-word的情況下，word-break為normal或break-word，顯示效果都如上圖，沒有變化。因為word-wrap允許長單詞在單詞內換行，word-break並沒有指明其它的換行規則：normal采用默認的換行規則，break-word也是在單詞內換行。
如果設置
word-wrap: break-word;word-break: break-all;
此時顯示的效果如下：
因為word-break設置為break-all，會在半角空格或連字符處換行。此時，即使word-wrap為normal，也不會影響顯示效果。
以上兩種屬性主流瀏覽器都支持
自動換行