更新时间:2014年4月20日

bdi元素(分离方向性文档)【新元素

<bdi>~</bdi>

bdi元素用于分离带有方向性的文档,使其与前后文档分离。浏览器内部在处理英语、汉语时是从左到右的方向进行的,如果是阿拉伯语则相反。这样的文字混在一起时,前后文字方向就会受其影响,所在位置发生变化。为了避免这样的情况,解决的方法是给特定的文字(阿拉伯语)使用bdi元素。

使用例

位置发生变化例(bdi元素使用之前):

<ul>

<li>User <span>jcranmer</span>: 12 posts.</li>

<li>User <span>hober</span>: 5 posts.</li>

<li>User <span>إيان</span>: 3 posts.</li>

</ul>

正常显示例(bdi元素使用之后):

<ul>

<li>User <bdi>jcranmer</bdi>: 12 posts.</li>

<li>User <bdi>hober</bdi>: 5 posts.</li>

<li>User <bdi>إيان</bdi>: 3 posts.</li>

</ul>

浏览器上的显示结果↓

位置发生变化例(bdi元素使用之前):
  • User jcranmer: 12 posts.
  • User hober: 5 posts.
  • User إيان: 3 posts.
正常显示例(bdi元素使用之后):
  • User jcranmer: 12 posts.
  • User hober: 5 posts.
  • User إيان: 3 posts.

浏览器支持情况

元素
bdi no 16.0 10.0 no no