<bdi>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
HTML 双向隔离元素（<bdi>）告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
尝试一下
<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;
}
/* stylelint-disable-next-line block-no-empty */
bdi {
}
.name {
color: red;
}
尽管同样的显示效果可以通过使用 CSS 规则 unicode-bidi：隔离<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 | HTMLElement |
属性
如同其他 HTML 元素一样，它包含全局属性，但是有一些语义上的细微差别：dir属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向。
示例
html
<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 |
|---|
| HTML # the-bdi-element |
浏览器兼容性
Loading…
参见
- 相关元素：
<bdo> - 相关属性：
direction,unicode-bidi