<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 样式来传递语义时就显得毫无用处。

属性

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

规范

浏览器兼容性

参见

• 相关元素：<bdo>
• 相关属性：direction, unicode-bidi