1. Web
  2. CSS
  3. CSS 文字
  4. 換行和文字中斷

換行和文字中斷

本指南解釋了在 CSS 中管理溢位文字的各種方法。

什麼是溢位文字？

在 CSS 中，如果你有一個不可斷開的字串，例如一個非常長的單詞，預設情況下，如果它在行內方向上太小而無法容納，它將溢位任何容器。我們可以在下面的示例中看到這種情況：長單詞超出了其所在框的邊界。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

CSS 將以這種方式顯示溢位，因為做其他事情可能會導致資料丟失。在 CSS 中，資料丟失意味著你的部分內容消失了。因此，overflow 的初始值是 visible，我們可以看到溢位的文字。通常，即使它很雜亂，也能看到溢位更好。如果像將 overflow 設定為 hidden 那樣，內容消失或被裁剪，你可能在預覽網站時無法發現它。雜亂的溢位至少很容易發現，在最壞的情況下，即使內容看起來有點奇怪，你的訪問者也能夠看到並閱讀它。

在下一個示例中，你可以看到將 overflow 設定為 hidden 時會發生什麼。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow: hidden;
}

查詢 min-content 大小

為了找到在不發生溢位的情況下能包含其內容的最小框大小，請將框的 width 或 inline-size 屬性設定為 min-content。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: min-content;
}

因此，使用 min-content 是處理溢位框的一種可能性。如果允許框增長到內容所需的最小大小但不再大，使用此關鍵字將為你提供該大小。

長單詞斷開

如果框需要固定大小，或者你希望確保長單詞不會溢位，那麼 overflow-wrap 屬性可以提供幫助。一旦單詞太長而無法單獨適應一行，此屬性將斷開單詞。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow-wrap: break-word;
}

注意： overflow-wrap 屬性與非標準屬性 word-wrap 的行為方式相同。瀏覽器現在將 word-wrap 屬性視為標準屬性的別名。

另一種可以嘗試的屬性是 word-break。此屬性將在單詞溢位的點處斷開單詞。即使將單詞放到新行可以使其在不中斷的情況下顯示，它也會導致斷開。

在下一個示例中，你可以在相同的文字字串上比較這兩個屬性之間的差異。

html
<div class="box box1">A Very LongWordThatHasNoBreakingPossibilities</div>

<div class="box box2">A Very LongWordThatHasNoBreakingPossibilities</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 30ch;
  margin-block-end: 1em;
}
.box1 {
  word-break: break-all;
}

.box2 {
  overflow-wrap: break-word;
}

如果你想防止在字串剛好有足夠空間時出現大間隙，或者在有其他元素你不希望立即斷開的情況下，這可能會很有用。

在下面的示例中，有一個複選框和標籤。假設，如果標籤太長而無法容納在框中，你希望它斷開。但是，你不希望它直接在複選框之後斷開。

html
<div class="field">
  <input id="one" type="checkbox" /><label for="one">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

<div class="field field-br">
  <input id="two" type="checkbox" /><label for="two">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>
css
.field {
  inline-size: 150px;
  border: 1px solid #cccccc;
  margin-block-end: 1em;
  padding: 10px;
}

.field-br {
  word-break: break-all;
}

新增連字元

要在單詞斷開時新增連字元，請使用 CSS hyphens 屬性。使用 auto 值，瀏覽器可以自由地在適當的連字元點自動斷開單詞，遵循它選擇的任何規則。為了對過程進行一些控制，請使用 manual 值，然後將硬斷字元 (U+2010) 或軟斷字元 (U+00AD) 插入到字串中。硬斷字元可以使用 ‐ 或 &#x2010; 新增，軟斷字元可以使用 &shy;、&#173; 或 &#xad; HTML 字元程式碼新增。硬斷字始終會斷開，即使沒有必要這樣做。軟斷字僅在需要斷開時才斷開。

html
<div class="box">
  Llanfair&shy;pwllgwyngyll&shy;gogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  inline-size: 150px;
  overflow-wrap: break-word;
  hyphens: manual;
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
}

你還可以使用 hyphenate-character 屬性，使用你選擇的字串代替預設的連字元字元，用於行尾（在連字元換行符之前）的語言。auto 值根據當前內容語言的排版約定選擇正確的值來標記單詞中換行符。

CSS 提供了額外的連字元控制：hyphenate-limit-chars 屬性可用於設定允許連字元的最小單詞長度以及連字元之前和之後的最小字元數。

<wbr> 元素

如果你知道要在一個長字串的何處斷開，那麼也可以插入 HTML <wbr> 元素。這在頁面上顯示長 URL 等情況下可能很有用。然後你可以新增該屬性以在合理的、使其更易於閱讀的位置斷開字串。

在下面的示例中，文字在 <wbr> 的位置斷開。

html
<div class="box">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者 於 最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.