如何在 HTML 中表示必须与其周围内容隔离的文本以进行双向文本格式化？

HTML 的<bdi> 元素指示浏览器的双向算法将其中包含的文本独立于周围内容进行处理。当网站动态添加一些文本但不确定其应显示方向时，这非常有用。

例如，阿拉伯语、乌尔都语或希伯来语等少数语言是从右到左书写，而不是通常的从左到右。我们使用<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>

输出

执行上述脚本后，输出窗口将打开，其中包含添加了<bdi>的不同摔跤冠军及其位置，使我们的文本以正确的方式显示。

更新于： 2022-09-05

171 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告