CSS3 word-break 屬性語法
word-break: 文字斷行效果;
常見的 word-break 屬性的文字斷行效果分為三種，分別為 normal, break-all, keep-all，整理如下表：CSS3 word-break 可能的值
| 設定值 | 說明 |
| normal | 預設值，根據瀏覽器預設的斷行效果。 |
| keep-all | 不可以在單字的字母換行，必須保留完整單字，例如遇到半形空格才能換行。 |
| break-all | 可以在單字的字母換行，不一定要完整單字才能換行。 |
| initial | 將 word-break 屬性設為預設值。 |
| inherit | 繼承自父層的 word-break 屬性設定。 |
<meta charset="utf-8">
<style>
#DIV1{
width:370px;
height:50px;
border:1px gray solid;
word-break:normal;
}
</style>
<div id="DIV1">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
範例的輸出效果<style>
#DIV1{
width:370px;
height:50px;
border:1px gray solid;
word-break:normal;
}
</style>
<div id="DIV1">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
範例一所使用的文字斷行效果為 normal，所以各位實際看到的效果可能有所差異，因為 normal 的效果，等於是把斷行的規則交給瀏覽器去執行，每款瀏覽器的預設斷行方式不一定相同，通常是會保留英文單字的完整。CSS3 word-break 屬性範例二、使用 keep-all 設定
<meta charset="utf-8">
<style>
#DIV2{
width:370px;
height:50px;
border:1px gray solid;
word-break:keep-all;
}
</style>
<div id="DIV2">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
範例的輸出效果<style>
#DIV2{
width:370px;
height:50px;
border:1px gray solid;
word-break:keep-all;
}
</style>
<div id="DIV2">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
範例二所採用的是 word-break 屬性的 keep-all 效果，讓英文單字保持完整，這也是絕大多數瀏覽器的預設值，從範例的輸出效果可以看到英文單字 word-break 都沒有被切斷，而是在單字開始的時候就直接是第二行，第一行的右側會多一塊空白。CSS3 word-break 屬性範例三、使用 break-all 設定
<meta charset="utf-8">
<style>
#DIV3{
width:370px;
height:50px;
border:1px gray solid;
word-break:break-all;
}
</style>
<div id="DIV3">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
範例的輸出效果<style>
#DIV3{
width:370px;
height:50px;
border:1px gray solid;
word-break:break-all;
}
</style>
<div id="DIV3">
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
</div>
這是一行 word-break 屬性的測試文字，這是一行 word-break 屬性的測試文字
範例三可說是 CSS3 word-break 屬性的精華，因為 break-all 的效果會讓單字無論是否完整都在節尾處直接被切斷，所以第一行右側是填滿的，而英文單字也被切成兩行，一般的瀏覽器不會預設這種效果，所以網頁設計師可以自己設定，也因為有這樣的功能，所以才說 CSS3 的這個 word-break 屬性是網頁排版的新利器，相當簡單好用而且可以很有效率的讓版面看起來更加整齊，缺點則是切斷的英文單字有些人可能會看不懂，所以最好還是根據網頁推出後的目標族群，是否有足夠的英文閱讀能力，再決定要用哪種 word-break 設定方式。更多文字設計