如何在 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 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.