HTML <bdi> 元素

HTML <bdi> 元素（bidirectional isolation 双向隔离）会隔离可能以不同方向进行格式化的外部文本。

当在有固定方向性的文本中，嵌入未知方向性的文本时（例如来自数据库的文本），该元素非常有用。

实例

将用户名从周围的文本方向设置中隔离出来：

<ul>
  <li>用户 <bdi>hrefs</bdi>: 60 分</li>
  <li>用户 <bdi>jdoe</bdi>: 80 分</li>
  <li>用户 <bdi>إيان</bdi>: 90 分</li>
</ul>

尝试一下 »

特性

内容类别	流式内容，短语内容，可触知内容。
允许的内容	短语内容。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受短语内容的元素。
允许的 ARIA 角色	任意
DOM interface	HTMLElement

属性

像所有其他 HTML 元素一样，此元素具有全局属性。但有轻微的语义差异：dir 属性不继承父元素。如果没有设置，它的默认值是 auto ，让浏览器根据元素的内容决定方向。

事件属性

<bdi> 元素支持 HTML 的事件属性。

使用注意

虽然可以使用 CSS 规则 unicode-bidi: isolate 在 <span> 或其他文本格式元素上实现相同的视觉效果，但是只有 <bdi> 元素能传达出这种方向语义。特别是浏览器是可以忽略 CSS 样式的，在这种情况下，使用 HTML 元素文本仍能正确显示，而通过 CSS 样式对语义化完全无用。

更多实例

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi>
is automatically displayed right-to-left.</p>

结果

This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.

规范

规范	状态	备注
HTML Living Standard <bdi> 的定义	现行的标准	-
HTML5 <bdi> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 相关的 HTML 元素：<bdo>
• 相关 HTML 属性：direction，unicode-bidi