HTML - <bdi> 標籤

HTML <bdi> 標籤代表雙向隔離元素。它將文字與可能以不同方向格式化的其他文字區分開來。通常，當網站動態插入某些文字並且不知道文字的方向性時，它很有用。可以包含從左到右 (LTR) 和從右到左 (RTL) 字元序列的文字稱為雙向文字。

例如，拉丁字元被視為 LTR，而阿拉伯字元被視為 RTL。要了解 LTR 和 RTL，請檢視 CSS - direction。

HTML <bdi> 標籤以兩種方式工作

<bdi> 中嵌入文字的方向性不會影響周圍文字的方向性。
<bdi> 中嵌入文字的方向性不受周圍文字的方向性影響。

語法

<bdi>...</bdi>

屬性

HTML bdi 標籤支援 HTML 的全域性和事件屬性。

HTML bdi 標籤示例

在這些示例中，我們將看到多個 HTML bdi 標籤的示例，其中每個示例都定義了 bdi 標籤的特性。

獨立嵌入上下文

在下面的示例中，讓我們看看使用 LTR 和 RTL 文字的 <bdi> 標籤的使用。我們使用 <bdi> 標籤獲取競賽的獲勝者。這些元件指示瀏覽器獨立於其嵌入上下文處理名稱，因此示例輸出按正確的順序排列。

<!DOCTYPE html>
<html>
<body>
   <ul>
      <li>
         <bdi class="name">اَلأَعْشَى</bdi> - 1st place
      </li>
      <li>
         <bdi class="name">Jerry Cruncher</bdi> - 2nd place
      </li>
   </ul>
 </body>
</html>

帶有 bdi 元素的雙向演算法

在這裡，我們正在建立一個 HTML 文件並使用 <bdi> 標籤顯示使用者名稱及其分數。如果瀏覽器不支援 bdi 標籤，阿拉伯使用者的使用者名稱將使文字混淆（雙向演算法會將冒號和數字“90”放在“使用者”一詞旁邊，而不是“分數”一詞旁邊）。

<!DOCTYPE html>
<html>
<body>
   <h1>The bdi element</h1>
   <ul>
      <li>User 
         <bdi>hrefs</bdi>: 60 points 
      </li>
      <li>User 
         <bdi>jdoe</bdi>: 80 points 
      </li>
      <li>User 
         <bdi>إيان</bdi>: 90 points 
      </li>
   </ul>
 </body>
</html>

bdi 元素樣式

在下面的示例中，我們正在建立一個 HTML 文件並使用 <bdi> 標籤和 CSS 屬性來設定 bdi 標籤內容的樣式。

<!DOCTYPE html>
<html>
<head>
   <style>
      bdi{
         color: red;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>The bdi element</h1>
   <ul>
      <li>User 
         <bdi>hrefs</bdi>: 60 points 
      </li>
      <li>User 
         <bdi>jdoe</bdi>: 80 points 
      </li>
      <li>User 
         <bdi>إيان</bdi>: 90 points 
      </li>
   </ul>
 </body>
</html>

支援的瀏覽器

標籤
bdi	支援 16.0	支援 79.0	支援 10.0	不支援	支援 15.0

html_tags_reference.htm

列印頁面