文字換行
進行網頁排版時,常會遇到「需要文字換行」或「不想要文字換行」的狀況,這篇教學會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、overflow-wrap ( word-wrap ),以及換行時使用 hyphens 產生「連字號」的做法,運用這些換行有關的樣式屬性,精準的控制文字換行。
換行樣式
網頁的換行分成「硬換行」和「軟換行」兩種方式:
- 硬換行:遇到換行字元或
<br/>
元素而強制換行。- 軟換行:當文字長度超過單行長度而自動換行,可以透過 CSS 樣式屬性控制換行行為。
下方列出使用 CSS 控制換行行為的樣式屬性 ( 所有瀏覽器都支援,並都具有繼承特性 ),大多數的換行樣式,只需要使用 word-break
和 overflow-wrap
( word-wrap
) 搭配即可。
如要讓「過長的文字」在換行時加入連字號,或在指定的位置換行,請前往:hyphens 連字號。
樣式屬性 | 屬性值 | 說明 |
---|---|---|
word-break | normal、break-all、keep-all | 文字的換行方式。 |
line-break | auto、lost、normal、strict、anywhere | 具有標點符號 CJK ( 中日韓 ) 文字的換行方式。 |
overflow-wrap ( word-wrap ) | normal、break-word | 單字中的換行方式。 |
word-break 文字換行方式
word-break
樣式屬性可以設定「文字的換行方式」,具有繼承特性,下方列出相關屬性值:
注意,這個樣式需要在
white-space: normal;
的狀態下才會正常運作,參考:定義文字空白與 Tab 大小。
屬性數值 | 說明 |
---|---|
normal | 預設的換行規則。 |
break-all | 非「CJK 中日韓」文字在單字之間換行 ( 空白分隔的字串就是單字,標點符號為非中日韓文字 )。 |
keep-all | 非「CJK 中日韓」文字按照 normal 規則,「中日韓」文字不換行 ( 標點符號為非中日韓文字 )。 |
下方的範例使用不同的 word-break
屬性數值讓文字換行,需要注意「CJK 中日韓」語系和英文語系有差異,混用時英文會套用英文,中日韓文會套用中日文。
<!-- HTML 程式碼 -->
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="c">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 400px;
margin: 10px;
padding: 10px;
}
.a {word-break: normal;}
.b {word-break: break-all;}
.c {word-break: keep-all;}
</style>
line-break CJK ( 中日韓 ) 文字的換行方式
line-break
樣式屬性可以設定「具有標點符號 CJK ( 中日韓 ) 文字的換行方式」,具有繼承特性,通常在處理 CJK 語系或特殊標點符號的換行行為 ( 參考:UNICODE LINE BREAKING ALGORITHM )下方列出相關屬性值:
注意,這個樣式需要在
white-space: normal;
的狀態下才會正常運作,參考:定義文字空白與 Tab 大小。
屬性數值 | 說明 |
---|---|
auto | 預設換行規則,通常等於 normal。 |
loose | 鬆散換行規則,通常等於 normal。 |
normal | 普通換行規則。 |
strict | 嚴格換行規則,通常等於。 |
anywhere | 任何位置都可以換行。 |
下方的範例使用不同的 line-break
屬性數值讓文字換行,範例中設定 word-break:keep-all;
,若修改為 word-break:break-all;
可以看到最後一個 div 仍然呈現全部換行的樣式。
<!-- HTML 程式碼 -->
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="c">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="d">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<div class="e">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 360px;
margin: 10px;
padding: 10px;
word-break: keep-all;
}
.a {line-break: auto;}
.b { line-break: strict;}
.c {line-break: normal;}
.d {line-break: loose;}
.e {line-break: anywhere;}
</style>
overflow-wrap ( word-wrap ) 單字中的換行方式
overflow-wrap
和 word-wrap
是同一種樣式屬性,可以設定「單字中的換行方式」,具有繼承特性,兩者差別只在於 overflow-wrap
是新版的樣式屬性名稱,為了向下相容所以目前兩個名稱都可以使用,下方列出相關屬性值:
注意,這個樣式需要在
white-space: normal;
的狀態下才會正常運作,參考:定義文字空白與 Tab 大小。
屬性數值 | 說明 |
---|---|
normal | 預設換行規則。 |
break-word | 拆開單字換行 ( 如果有隱藏換行位置,會從該位置換行 )。 |
下方的範例使用不同的 overflow-wrap
( word-wrap
) 屬性數值讓文字換行。
<!-- HTML 程式碼 -->
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br/>大家好我是 OXXO,現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行?接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 360px;
margin: 10px;
padding: 10px;
white-space: normal;
}
.a {overflow-wrap: normal;}
.b {overflow-wrap: break-word;}
</style>
hyphens 連字號
hyphens
可以設定「單字中的連字號」,具有繼承特性,只要在過長的單字中加上「­
」符號 ( 這個符號是隱藏的,並不會顯示 ),換行時就會在 ­
的位置換行並補上連字號「-
」,下方列出相關屬性值:
注意,這個樣式在
word-break: break-all;
或line-break: anywhere;
強制換行的樣式中沒有作用。
屬性數值 | 說明 |
---|---|
manual | 預設在人工換行符號時換行,並添加連字號。 |
auto | 根據作業系統和瀏覽器規則,自動添加連字號。 |
none | 不添加連字號。 |
下方的範例會兩個過長單字的第二個加入 ­
,透過不同的 hyphens
屬性數值讓文字換行時產生連字號,藍色箭頭的連字號是系統自動產生 ( 不同電腦或瀏覽器觀看可能會有不同結果 ),紅色箭頭的連字號則是手動添加。
<!-- HTML 程式碼 -->
<div class="a">
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
abcdefghijklmnopqrstuvwxyz­abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
</div>
<div class="b">
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
abcdefghijklmnopqrstuvwxyz­abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</div>
<div class="c">
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
abcdefghijklmnopqrstuvwxyz­abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</div>
<div class="d">
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
<br/>
abcdefghijklmnopqrstuvwxyz­abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 2px solid #000;
width: 360px;
margin: 10px;
padding: 10px;
}
.a {hyphens: manual;}
.b {hyphens: auto;}
.c {hyphens: none;}
.d {
hyphens: none;
word-break: break-all; /* 加上強制換行,不會有連字號 */
}
</style>
小結
由於響應式網頁技術的興起,加上中英文的交錯撰寫,間接讓「文字換行」變成網頁排版上的重要課題,透過這篇教學的介紹,相信對於使用 CSS 控制文字換行,能夠更得心應手
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~