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

打印页面