<bdi>：双向孤立元素

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

<bdi> HTML 元素告诉浏览器的双向算法将其包含的文本与周围文本隔离开来处理。当网站动态插入文本，但不知道所插入文本的方向性时，此元素尤其有用。

试一试

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

html {
  font-family: sans-serif;
}

bdi {
  /* Add your styles here */
}

.name {
  color: red;
}

双向文本是指可能同时包含从左到右（LTR）排列的字符序列和从右到左（RTL）排列的字符序列的文本，例如嵌入在英文字符串中的阿拉伯语引述。浏览器会实现 Unicode 双向算法来处理这种情况。在该算法中，字符会被赋予隐式方向性：例如，拉丁字母被视为 LTR，而阿拉伯字母被视为 RTL。其他一些字符（如空格和某些标点符号）被视为中性字符，其方向性会根据周围字符的方向性来确定。

通常情况下，双向算法能够正确处理，无需作者提供任何特殊标记。但偶尔，该算法需要帮助。这时 `<bdi>` 就派上用场了。

<bdi> 元素用于包裹一段文本，并指示双向算法将此文本与其周围环境隔离开来处理。这体现在两个方面：

嵌入在 <bdi> 中的文本的方向性不会影响周围文本的方向性。
嵌入在 <bdi> 中的文本的方向性不受周围文本方向性的影响。

例如，考虑以下文本：

EMBEDDED-TEXT - 1st place

如果 `EMBEDDED-TEXT` 是 LTR，则此文本显示正常。但如果 `EMBEDDED-TEXT` 是 RTL，那么 ` - 1` 将被视为 RTL 文本（因为它由中性字符和弱字符组成）。结果将是乱码。

1 - EMBEDDED-TEXTst place

如果你预先知道 `EMBEDDED-TEXT` 的方向性，则可以通过将 `EMBEDDED-TEXT` 包装在带有 `dir` 属性设置为已知方向性的 <span> 中来解决此问题。但如果你不知道方向性——例如，因为 `EMBEDDED-TEXT` 是从数据库读取的，或者是由用户输入的——那么你应该使用 `<bdi>` 来防止 `EMBEDDED-TEXT` 的方向性影响其周围环境。

尽管使用 CSS 规则 unicode-bidi: isolate 应用于 <span> 或其他文本格式化元素可以实现相同的视觉效果，但 HTML 作者不应使用此方法，因为它缺乏语义，并且浏览器可以忽略 CSS 样式。

使用 <span dir="auto"> 嵌入字符与使用 `<bdi>` 效果相同，但其语义不太明确。

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

无 bdi，含 RTL 文本

此示例仅使用 <span> 元素列出了竞赛的获胜者，其中一位获胜者的名字由 RTL 文本组成。在这种情况下，由中性或弱方向性字符组成的 ` - 1` 将采用 RTL 文本的方向性，结果将是乱码。

html

<ul>
  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

使用 bdi 处理 LTR 和 RTL 文本

此示例使用 <bdi> 元素列出了竞赛的获胜者。这些元素指示浏览器将姓名与其嵌入上下文隔离开来处理，因此示例输出的顺序是正确的。

html

<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

技术摘要

内容类别	流式内容、语句内容、明显内容。
允许内容	短语内容.
标签省略	无，起始标签和结束标签都必须存在。
允许父级	任何接受短语内容的元素。
隐式 ARIA 角色	`generic`
允许的 ARIA 角色	任意
DOM 接口	`HTMLElement`

规范

规范
HTML # the-bdi-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025年7月9日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误