<bdi>：雙向孤立元素

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

<bdi> HTML 元素告訴瀏覽器的雙向演算法將其包含的文字與周圍文字隔離開來處理。當網站動態插入文字，但不知道所插入文字的方向性時，此元素尤其有用。

試一試

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

html {
  font-family: sans-serif;
}

bdi {
  /* Add your styles here */
}

.name {
  color: red;
}

雙向文字是指可能同時包含從左到右（LTR）排列的字元序列和從右到左（RTL）排列的字元序列的文字，例如嵌入在英文字串中的阿拉伯語引述。瀏覽器會實現 Unicode 雙向演算法來處理這種情況。在該演算法中，字元會被賦予隱式方向性：例如，拉丁字母被視為 LTR，而阿拉伯字母被視為 RTL。其他一些字元（如空格和某些標點符號）被視為中性字元，其方向性會根據周圍字元的方向性來確定。

通常情況下，雙向演算法能夠正確處理，無需作者提供任何特殊標記。但偶爾，該演算法需要幫助。這時 `<bdi>` 就派上用場了。

<bdi> 元素用於包裹一段文字，並指示雙向演算法將此文字與其周圍環境隔離開來處理。這體現在兩個方面：

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

例如，考慮以下文字：

EMBEDDED-TEXT - 1st place

如果 `EMBEDDED-TEXT` 是 LTR，則此文字顯示正常。但如果 `EMBEDDED-TEXT` 是 RTL，那麼 ` - 1` 將被視為 RTL 文字（因為它由中性字元和弱字元組成）。結果將是亂碼。

1 - EMBEDDED-TEXTst place

如果你預先知道 `EMBEDDED-TEXT` 的方向性，則可以透過將 `EMBEDDED-TEXT` 包裝在帶有 `dir` 屬性設定為已知方向性的 <span> 中來解決此問題。但如果你不知道方向性——例如，因為 `EMBEDDED-TEXT` 是從資料庫讀取的，或者是由使用者輸入的——那麼你應該使用 `<bdi>` 來防止 `EMBEDDED-TEXT` 的方向性影響其周圍環境。

儘管使用 CSS 規則 unicode-bidi: isolate 應用於 <span> 或其他文字格式化元素可以實現相同的視覺效果，但 HTML 作者不應使用此方法，因為它缺乏語義，並且瀏覽器可以忽略 CSS 樣式。

使用 <span dir="auto"> 嵌入字元與使用 `<bdi>` 效果相同，但其語義不太明確。

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

無 bdi，含 RTL 文字

此示例僅使用 <span> 元素列出了競賽的獲勝者，其中一位獲勝者的名字由 RTL 文字組成。在這種情況下，由中性或弱方向性字元組成的 ` - 1` 將採用 RTL 文字的方向性，結果將是亂碼。

html

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

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

使用 bdi 處理 LTR 和 RTL 文字

此示例使用 <bdi> 元素列出了競賽的獲勝者。這些元素指示瀏覽器將姓名與其嵌入上下文隔離開來處理，因此示例輸出的順序是正確的。

html

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

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

技術摘要

內容類別	流式內容、語句內容、明顯內容。
允許內容	短語內容.
標籤省略	無，起始標籤和結束標籤都必須存在。
允許父級	任何接受短語內容的元素。
隱式 ARIA 角色	`generic`
允許的 ARIA 角色	任意
DOM 介面	`HTMLElement`

規範

規範
HTML # the-bdi-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 2025年7月9日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤