如何在 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

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告