在 HTML 中，如何表示必须与周围内容隔离以实现双向文本格式的文本?

htmlweb developmentfront end technology更新于 2025/4/9 20:28:17

<bdi> HTML 元素指示浏览器的双向算法独立处理其包含的文本，使其与周围的内容无关。当网站动态添加文本而不知道其应该朝哪个方向移动时，此功能非常有用。

例如，阿拉伯语、乌尔都语或希伯来语等少数语言的书写方向是从右到左，而不是通常的从左到右。我们在与脚本方向相反的文本前后使用 <bdi></bdi> 标签来重新排列文本。

但是，如果文本方向存在混淆，或者我们不知道文本的方向，请将 dir = auto 标签应用于任何包裹文本位置的标记。但如果没有标记，则再次使用 bdi 标签包裹文本。

语法

<bdi> text </bdi>

以下是示例……

示例

在下面的示例中，我们使用 bdi 元素来表示一段文本，以便将其与周围环境隔离开来。在这里，我们使用 bdi 标签包裹一行阿拉伯语文本，并使用 dir = auto 标签包裹另一行带有 span 标记的文本。


<!DOCTYPE html>
<html>
<body>
   <h1>World wrestling championships</h1>
   <ul>
      <li><bdi class="name">Akshay</bdi>: 1st place</li>
      <li><bdi class="name">Balu</bdi>: 2nd place</li>
      <li><span class="name">Mani</span>: 3rd place</li>
      <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
      <li><span class="name" dir="auto">تیز سمی</span>: 5th place</li>
   </ul>
</body>
</html>