<bdi>

Summary


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

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

Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parent elements Any element that accepts phrasing content.
DOM interface HTMLElement

属性

dir

如同其他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.

规范

Specification Status Comment
HTML Living Standard
<bdi>
Living Standard
HTML5
<bdi>
Recommendation

浏览器兼容

BCD tables only load in the browser

参见