HTML代码 bdi 标签的用法及作用

html代码中的<bdi>标签是html5新增的，“bdi”是英文单词“Bi-directional Isolation”的缩写，有“双向隔离”意思，这些不重要，重要的是<bdi>标签的用法及作用有哪些？

<bdi>标签定义

<bdi>标签是指双向隔离元素，允许您设置一段文本，使其脱离其父元素的文本方向设置；

<bdi>标签是双标签，必须有开始标签和结束标签；

<bdi>标签是HTML5新增的标签；

目前只有 Firefox 和 Chrome 浏览器支持<bdi>标签 。

<bdi>标签格式

<bdi>标签主要是让文字的方向发生变化，从左向右或者从右向左。

<bdi dir="设置文本方向">元素内容</bdi>

<bdi>标签控制文本方向是通过属性dir实现的

ltr是英文词组“left to right”的首字母缩写；

rtl是英文词组“right to left”的首字母缩写。

<bdi>标签用法

<bdi>标签里面的文字是和该标签后面的文字按照dir属性设置的方向进行设置。 

1、设置文本从左向右的方向

<p>This <bdi dir="ltr">is</bdi> 17 years.</p>

当我们设置dir="ltr"时，以上代码显示结果为：This is an orange.

2、设置文本从右向左的方向

从上图可以发现：

1、如果在<bdi>标签后面是数字，显示结果将<bdi>和</bdi>之间的“is”和数字“17”按照从右向左的方向显示；但通过复制，然后粘贴得到的仍然保持原本的方向。

2、如果在<bdi>标签后面是英文字符，显示结果会保持原有的顺序显示，并不会将<bdi>和</bdi>之间的“is”和英文字符“seventeen”按照从右向左的方向显示；

但要注意，<bdi>标签后面是英文字符、中文汉字等强字符，就不会按照从右向左的方向显示，如果是数字，则会按照从右向左的方向显示；