CSS3 word-wrap 屬性讓很長的單字可以切換到下一行

CSS3 word-wrap 屬性的功能是讓很長的單字可以切換到下一行，大部的瀏覽器預設值都是讓很長的單字保留完整，直接在跳倒下一行或是讓單字超出 DIV 區塊的範圍，如果這兩種情況都不是設計師想要呈現的效果，還有一種效果是讓單字＂被折到下一行＂，不會向右超出 DIV 區塊的範圍，也不會留過多空白在字串尾端，所有主流的瀏覽器都支援 CSS3 的 word-wrap 屬性。

CSS3 word-wrap 屬性語法

word-wrap: 單字折行設定;

通常會採用兩種設定效果，分別是讓單字維持正常以及讓單字折行顯示，可用的值整裡如下表。

CSS3 word-wrap 屬性可用的值

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

CSS3 word-wrap 屬性範例一、採用 normal 效果

<meta charset="utf-8">
<style>
#DIV1{
    width:260px;
    height:80px;
    border:1px gray solid;
    word-wrap:normal;
}
</style>
<div id="DIV1">
vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.
</div>

範例的輸出結果

vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.

範例一先準備了一個寬度為 260px 的 DIV 區塊，我們故意在區塊內隨意寫了一條很長的英文字串，接著透過 word-wrap 屬性的 normal 設定，讓這很長的英文字串超出 DIV 區塊的範圍，這其實也是大多數瀏覽器的預設效果。

CSS3 word-wrap 屬性範例二、採用 break-word 效果

<meta charset="utf-8">
<style>
#DIV2{
    width:260px;
    height:80px;
    border:1px gray solid;
    word-wrap:break-word;
}
</style>
<div id="DIV2">
vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.
</div>

範例的輸出結果

vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.

範例二就是 word-wrap 屬性的最關鍵應用，與範例一同樣的 DIV 區塊、同樣的超長英文字串，可是利用 word-wrap 屬性的 break-word 效果，可以很輕易的讓本來會超出 DIV 區塊範圍的英文字串自動折到下一行繼續顯示。