HTML - bdi 标签

HTML <bdi> 标签代表双向隔离元素。它将文本与可能以不同方向格式化的其他文本区分开来。通常，当网站动态插入一些文本并且不知道文本的方向性时，它很有用。可以同时包含从左到右（LTR）和从右到左（RTL）字符序列的文本称为双向文本。

例如，拉丁字符被视为 LTR，而阿拉伯字符被视为 RTL。要了解 LTR 和 RTL，请查看 CSS - 方向。

HTML <bdi> 标签以两种方式工作：

<bdi>中嵌入文本的方向性对周围文本的方向性没有影响。
<bdi>中嵌入文本的方向性不受周围文本的方向性影响。

语法


<bdi>...</bdi>

属性

<bdi> 标签支持 HTML 的全局属性和事件属性。

<bdi> 标签示例

在这些示例中，我们将看到 <bdi> 标签的多个示例，其中每个示例都定义了<bdi> 标签的特征。

独立嵌入上下文

在以下示例中，让我们看看 <bdi> 标签与 LTR 和 RTL 文本的用法。我们使用 <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”放在单词“user”旁边，而不是单词“points”旁边）。


<!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> 标签的css样式

在以下示例中，我们将创建一个 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

打印本页