index.md

title	slug
<bdi>	Web/HTML/Element/bdi

{{HTMLSidebar}}

HTML 双向隔离元素（<bdi>）告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。

{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}

尽管同样的显示效果可以通过使用 CSS 规则 {{cssxref("unicode-bidi")}}：隔离{{HTMLElement("span")}}或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略 CSS 样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用 CSS 样式来传递语义时就显得毫无用处。

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
标签省略	不允许，开始标签和结束标签都不能省略。
Permitted parent elements	Any element that accepts phrasing content.
DOM interface	{{domxref("HTMLElement")}}

属性

如同其他 HTML 元素一样，它包含全局属性，但是有一些语义上的细微差别：dir属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向。

示例

<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.

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

• 相关元素：{{HTMLElement("bdo")}}
• 相关属性：{{cssxref("direction")}}, {{cssxref("unicode-bidi")}}