文字換行

進行網頁排版時，常會遇到「需要文字換行」或「不想要文字換行」的狀況，這篇教學會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、overflow-wrap ( word-wrap )，以及換行時使用 hyphens 產生「連字號」的做法，運用這些換行有關的樣式屬性，精準的控制文字換行。

換行樣式

網頁的換行分成「硬換行」和「軟換行」兩種方式：

• 硬換行：遇到換行字元或 <br/> 元素而強制換行。
• 軟換行：當文字長度超過單行長度而自動換行，可以透過 CSS 樣式屬性控制換行行為。

下方列出使用 CSS 控制換行行為的樣式屬性 ( 所有瀏覽器都支援，並都具有繼承特性 )，大多數的換行樣式，只需要使用 word-break 和 overflow-wrap ( word-wrap ) 搭配即可，而 text-wrap 屬於較新的樣式屬性，少部分瀏覽器可能不支援 ( 特別是行動裝置瀏覽器 )。

如要讓「過長的文字」在換行時加入連字號，或在指定的位置換行，請前往：hyphens 連字號。

word-break 文字換行方式

word-break 樣式屬性可以設定「文字的換行方式」，具有繼承特性，下方列出相關屬性值：

注意，這個樣式需要在 white-space: normal; 的狀態下才會正常運作，參考：定義文字空白與 Tab 大小。

下方的範例使用不同的 word-break 屬性數值讓文字換行，需要注意「CJK 中日韓」語系和英文語系有差異，混用時英文會套用英文，中日韓文會套用中日文。

線上展示：https://codepen.io/oxxo/pen/JjqrxzY

<!-- 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 大小。

下方的範例使用不同的 line-break 屬性數值讓文字換行，範例中設定 word-break:keep-all;，若修改為 word-break:break-all; 可以看到最後一個 div 仍然呈現全部換行的樣式。

線上展示：https://codepen.io/oxxo/pen/rNgGReN

<!-- 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 大小。

下方的範例使用不同的 overflow-wrap ( word-wrap ) 屬性數值讓文字換行。

線上展示：https://codepen.io/oxxo/pen/YzbrgLe

<!-- 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 可以設定「單字中的連字號」，具有繼承特性，只要在過長的單字中加上「&shy」符號 ( 這個符號是隱藏的，並不會顯示 )，換行時就會在 &shy 的位置換行並補上連字號「-」，下方列出相關屬性值：

注意，這個樣式在 word-break: break-all; 或 line-break: anywhere; 強制換行的樣式中沒有作用。

下方的範例會兩個過長單字的第二個加入 &shy，透過不同的 hyphens 屬性數值讓文字換行時產生連字號，藍色箭頭的連字號是系統自動產生 ( 不同電腦或瀏覽器觀看可能會有不同結果 )，紅色箭頭的連字號則是手動添加。

線上展示：https://codepen.io/oxxo/pen/KKLXEJw

<!-- HTML 程式碼 --> 
<div class="a">
  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  <br/>
  abcdefghijklmnopqrstuvwxyz&shyabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  <br/>
</div>
<div class="b">
  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  <br/>
  abcdefghijklmnopqrstuvwxyz&shyabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</div>
<div class="c">
  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  <br/>
  abcdefghijklmnopqrstuvwxyz&shyabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</div>
<div class="d">
  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  <br/>
  abcdefghijklmnopqrstuvwxyz&shyabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</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>

text-wrap 美化排版的換行方式

text-wrap 可以設定「美化排版的換行方式」，具有繼承特性，由於這是 2024 推出樣式屬性，目前仍有少部分的瀏覽器不支援，使用這個樣式後根據瀏覽器的演算法計算換行的位置，進而美化排版，有下列屬性值：

注意，由於各家瀏覽器演算法不同，加上無法實際掌握換行位置，許多換行情況不如前幾種換行方式。

下方範例會展示這幾種屬性值的換行效果。

線上展示：https://codepen.io/oxxo/pen/WbeeWvP

<!-- HTML 程式碼 --> 
<div>The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. <br> 大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>
<div>The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. <br> 大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>
<div>The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. <br> 大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>
<div>The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. <br> 大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧 </div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 360px;
    margin: 10px;
    padding: 10px;  
    white-space: normal; 
    text-align: center;
  }
  div:nth-of-type(1) {text-wrap: wrap;}
  div:nth-of-type(2) {text-wrap: balance;}
  div:nth-of-type(3) {text-wrap: pretty;}
  div:nth-of-type(4) {text-wrap: nowrap;}
</style>

小結

由於響應式網頁技術的興起，加上中英文的交錯撰寫，間接讓「文字換行」變成網頁排版上的重要課題，透過這篇教學的介紹，相信對於使用 CSS 控制文字換行，能夠更得心應手

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～