<wbr>: 換行機會元素

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<wbr> HTML 元素表示一個換行機會——在文字中的一個位置，瀏覽器可以根據需要在此處選擇換行，即使其常規的換行規則在該位置不會建立換行。

試一試

<div id="example-paragraphs">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
</div>

#example-paragraphs {
  background-color: white;
  overflow: hidden;
  resize: horizontal;
  width: 9rem;
  border: 2px dashed #999999;
}

屬性

此元素僅包含全域性屬性。

注意

在 UTF-8 編碼的頁面上，<wbr> 的行為類似於 U+200B ZERO-WIDTH SPACE 碼位。特別地，它表現得像一個 Unicode bidi BN 碼位，這意味著它對雙向文字（bidi）排序沒有影響：<div dir=rtl>123,<wbr>456</div> 在不換行的情況下顯示為 123,456，而不是 456,123。

出於同樣的原因，<wbr> 元素不會在換行處引入連字元。如果只想在行尾顯示連字元，請改用軟連字元字元實體 ()。

示例

The Yahoo Style Guide 建議在標點符號之前換行 URL，以避免在行尾留下標點符號，這可能會讓讀者誤以為是 URL 的結束。

html

<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

結果

技術摘要

內容類別	流內容、短語內容。
允許內容	空
標籤省略	必須有起始標籤，且不能有結束標籤。
允許父級	任何接受短語內容的元素。
隱式 ARIA 角色	沒有對應的角色
允許的 ARIA 角色	任意
DOM 介面	`HTMLElement`

規範

規範
HTML # the-wbr-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年8月13日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題