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 區塊範圍的英文字串自動折到下一行繼續顯示。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012