HTML 文本換行技巧：wbr、soft hyphen 與 CSS word-break 完全指南

在 HTML 中控制文本換行行為，除了 <br> 強制換行，還有針對「寬度不足時自動換行、寬度足夠則單行顯示」的語義化標籤與 CSS 屬性。本文整理最實用的方案，解決長單詞、URL、代碼片段換行難題。

核心標籤：<wbr> (Word Break Opportunity)

<wbr> 告訴瀏覽器：「這裡可以換行，但不強制換行」。適用於長單詞、URL、代碼中允許斷行的位置。

<p>這是一個超長的URL：https://example.com/very/long/path/that/might/need/to/break<wbr>/at/appropriate<wbr>/places</p>

軟連字符：&shy; (Soft Hyphen)

­ 在需要換行時顯示連字符「-」，不換行時完全隱視。適合多語言環境下的單詞斷行。

<p>超長德文單詞：Donaudampfschifffahrt&shy;selektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft</p>

CSS 方案：word-break、overflow-wrap、white-space

最佳實踐組合

.text-auto-wrap {
  word-break: break-all;      /* 允許字符級斷行 */
  overflow-wrap: break-word;  /* 單詞過長強制斷行 */
  white-space: normal;        /* 自動換行 */
}

總結

• 語義化控制：用 <wbr>、­ 標記「可斷行點」。
• 全域樣式：用 overflow-wrap: break-word 防止容器撐破。
• 代碼/數據：用 word-break: break-all + white-space: pre-wrap。
• 按鈕/標題：用 white-space: nowrap + text-overflow: ellipsis 單行省略。

根據內容類型選擇適當方案，才能兼顧閱讀體驗與視覺美觀。