文字换行

进行网页排版时，常会遇到“需要文字换行”或“不想要文字换行”的状况，这篇教学会介绍 CSS 里控制换行的样式属性 word-break、line-break、overflow-wrap ( word-wrap )，以及换行时使用 hyphens 产生“连字号”或 hyphenate-character 替换连字号，运用这些换行有关的样式属性，精准的控制文字换行。

“强制不换行”是处理空白的“软换行”行为设定，作法参考：white-space 处理空白。

快速导览：

• 换行样式
• word-break 文字换行方式
• line-break ( CJK 中日韩 ) 文字的换行方式
• overflow-wrap ( word-wrap ) 单字中的换行方式
• hyphens 连字号
• hyphenate-character 自订换行符号
• text-wrap 美化排版的换行方式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

换行样式

网页的换行分成“硬换行”和“软换行”两种方式：

• 硬换行：遇到换行字元或 <br/> 元素而强制换行。
• 软换行：当文字长度超过单行长度而自动换行，可以透过 CSS 样式属性控制换行行为。

下方列出使用 CSS 控制换行行为的样式属性 ( 所有浏览器都支援，并都具有继承特性 )，大多数的换行样式，只需要使用 word-break 和 overflow-wrap ( word-wrap ) 搭配即可，而 text-wrap 属于较新的样式属性，少部分浏览器可能不支援 ( 特别是移动设备浏览器 )。

要让“过长的文字”在换行时加入连字号，或在指定的位置换行，请前往：hyphens 连字号。

word-break 文字换行方式

word-break 样式属性可以设定“文字的换行方式”，具有继承特性，下方列出相关属性值 ( CJK 表示中日韩文字，non-CJK 表示非中日韩文字，通常是英文 )：

• 注意，这个样式需要在 white-space: normal; 的状态下才会正常运作，参考：定义文字空白与 Tab 大小。
• “强制不换行”是处理空白的“软换行”行为设定，作法参考：white-space 处理空白。

下方的范例使用不同的 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 )，下方列出相关属性值，虽然有不同属性值，但在绝大部分的情况下的表现行为都等于 normal：

注意，这个样式需要在 white-space: normal; 的状态下才会正常运作，参考：定义文字空白与 Tab 大小。

下方的范例使用不同的 line-break 属性数值让文字换行。

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

<!-- HTML 程式碼 --> 
<div class="a">大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道，？。！＃＄％會不會換行!\<>&就來測試看看吧</div>
<div class="b">大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道，？。！＃＄％會不會換行!\<>&就來測試看看吧</div>
<div class="c">大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道，？。！＃＄％會不會換行!\<>&就來測試看看吧</div>
<div class="d">大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道，？。！＃＄％會不會換行!\<>&就來測試看看吧</div>
<div class="e">大家好我是 OXXO，現在來測試「 line-break:auto;」當長度太長時遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道，？。！＃＄％會不會換行!\<>&就來測試看看吧</div>

<!-- CSS 程式碼 -->
<style>
div {
  border: 2px solid #000;
  width: 280px;
  margin: 10px;
  padding: 10px;
}
.a {line-break: auto;}
.b { line-break: strict;}
.c {line-break: normal;}
.d {line-break: loose;}
.e {line-break: anywhere;}
</style>

虽然 line-break: anywhere; 和 word-break: break-all; 都有“强制换行”的特性，但 line-break: anywhere; 在某些情况下会透过“微调字元间距”的方式，尽可能保持单字的完整性并保持每行的对齐效果，让文字排版更为美观，下方范例会展示两者在换行时的小差异 ( 手动拖拉 main 元素观察效果 )：

线上展示：https://codepen.io/oxxo/pen/LEVMXyy

<!-- HTML 程式碼 --> 
<main>
  <div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz 大家好我是 OXXO，當長度太長時，遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
  <div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM. abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz 大家好我是 OXXO，當長度太長時，遇到標點符號不知道會不會換行？接下來的這段文字裡面沒有標點符號不知道會不會換行就來測試看看吧</div>
</main>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 80%;
    margin: 10px;
    font-size: 13px;
  }
  main {
    width: 300px;
    overflow: auto;
    resize: both;
    border: 1px dotted #000;
  }

  .a {word-break: break-all;}
  .b {line-break: anywhere;}
</style>

overflow-wrap ( word-wrap ) 单字中的换行方式

overflow-wrap 和 word-wrap 是同一种样式属性，可以设定“单字中的换行方式”，具有继承特性，两者差别只在于 overflow-wrap 是新版的样式属性名称，为了向下相容所以目前两个名称都可以使用，由于 CJK 中日韩语系没有所谓的“单字”，因此这个样式属性对该语系没有作用，下方列出相关属性值：

注意，这个样式需要在 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>

hyphenate-character 自订换行符号

hyphenate-character 样式属性可以让用户将连字号换成“自订换行符号”，默认值为 auto 表示遇到单字中加上“&shy”换行时使用连字号，可替换 auto 为不同的符号，就能在换行时将连字号换成自订的符号，下方范例会呈现多种不同的符号差异。

线上展示：https://codepen.io/oxxo/pen/bNbaaOE

<!-- HTML 程式碼 -->
<div>hello everyone!!&shyGood morning!!!&shyI am oxxo.studio!!&shyHow old are &shy you??</div>
<div>hello everyone!!&shyGood morning!!!&shyI am oxxo.studio!!&shyHow old are &shy you??</div>
<div>hello everyone!!&shyGood morning!!!&shyI am oxxo.studio!!&shyHow old are &shy you??</div>
<div>hello everyone!!&shyGood morning!!!&shyI am oxxo.studio!!&shyHow old are &shy you??</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 80px;
    border: 1px solid #000;
    margin: 30px 50px;
    float: left;
  }
  div:nth-child(1){hyphenate-character: auto;}
  div:nth-child(2){hyphenate-character: ">>>>";}
  div:nth-child(3){hyphenate-character: "哇哈哈";}
  div:nth-child(4){hyphenate-character: "===";}
</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; 
  }
  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 控制文字换行，能够更得心应手

意见反馈