HTML标签 <bdi>用法详解

作者:前端大神~ | 时间:2018-12-15

HTML标签 <bdi>是html5新出的一个标签,但很多人看了介绍后还是不太明白其用法,下面我就通过实例给大家详细讲解下。

定义和用法

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

当不知道是从什么方向嵌入文本,如来自于数据库的文本(有起数据库的文本方向)的时候,该元素是十分有用的。

特别是,当浏览器允许忽略CSS样式时,在这种情况下,使用<bdi>仍然可以保证文本正确显示,而使用CSS样式来传递语义时就显得毫无用处。

实例代码1

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(http://www.woyoudaan.cn/)</title> 
</head>
<body>

<p>在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。</p>

<ul>
 <li>用户 <bdi>bobo</bdi>: 70 分</li>
 <li>用户 <bdi>xiaoming</bdi>: 80 分</li>
 <li>用户 <bdi>إيان</bdi>: 100 分</li>
</ul>

</body>
</html>

显示效果如下:

HTML标签<bdi>用法详解

实例代码2

HTML标签<bdi>用法详解

浏览器支持

目前除了IE的浏览器,市面上大多数浏览器都支持该标签

属性支持

html<bdi>标签支持属性dir,用来规定 <bdi> 元素内的文本的文本方向

包含的值有:ltr rtl   auto

默认值是auto


通过上面的介绍,大家现在明白HTML标签 <bdi>该怎么去使用了吗?