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 |
|---|---|---|
| WHATWG HTML Living Standard <bdi> |
Living Standard | |
| HTML5 <bdi> |
Recommendation |
浏览器兼容
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 16 | 10.0 (10.0) | 未实现 | 未实现 | 未实现 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 未实现 | 10.0 (10.0) | 未实现 | 未实现 | 未实现 |
参见
- 相关元素:
<bdo> - 相关属性:
direction,unicode-bidi