CSS word-wrap

CSS3 word-wrap 屬性

CSS3 word-wrap 屬性的功能是讓很長的單字可以切換到下一行，瀏覽器大多預設值長的單字保留完整，直接在跳倒下一行或是讓單字超出 DIV 區塊的範圍，不會向右超出 DIV 區塊的範圍，也不會留過多空白在字串尾端，所有設定 CSS3 的 word-wrap 屬性。

CSS3 word-wrap 屬性語法 : word-wrap: normal / break-word / initial / inherit。

設定值	說明
normal	預設值，瀏覽器通常預設在單字比此間的空白換行，保留完整單字。
break-word	過長的單字會自動折到下一行。
initial	將單字折行樣式設為預設值。
inherit	繼承自父層的 word-wrap 樣式設定，非所有瀏覽器支援，不建議使用。

<style>#DIV1{width:300px;height:200px; border:2px gray solid; word-wrap:break-normal; } </style> <div id="DIV1"><span style="color: blue; font-size: x-large;"><b>word-wrap:break-normal</b></span> aaaaa aaaa aaaaaaaaa aaaaa aaaa aaaaaaaaaa aaaaaaaaa aaaaa aaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaa aaaaaa aaaaaaa aaa aaaaaaaaaa aaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaa aaaaaaaaaa aaaaaaa aaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaa aaaaa aaa aaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaa aaaaa aaa aaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <style>#DIV1{ width:300px; height:200px; border:2px gray solid; word-wrap:break-word; } </style><div id="DIV1"><span style="color: blue; font-size: x-large;"><b>word-wrap:break-word;</b></span>aaaa aaaaaaaaa aaaaa aaaa aaaaaaaaaa aaaaaaaaa aaaaa aaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaa aaaaaa aaaaaaa aaa aaaaaaaaaa aaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaa aaaaaaaaaa aaaaaaa aaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaa aaaaa aaa aaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaa aaaaa aaa aaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>