如何在 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年9月5日

浏览量：171

开启你的职业生涯

完成课程获得认证

开始学习
广告