1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <wbr>

<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> 元素不会在换行处引入连字符。如果只想在行尾显示连字符，请改用软连字符字符实体 (&shy;)。

示例

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

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的问题