html代码中的<bdi>标签是html5新增的,“bdi”是英文单词“Bi-directional Isolation”的缩写,有“双向隔离”意思,这些不重要,重要的是<bdi>标签的用法及作用有哪些?
<bdi>标签是指双向隔离元素,允许您设置一段文本,使其脱离其父元素的文本方向设置;
<bdi>标签是双标签,必须有开始标签和结束标签;
<bdi>标签是HTML5新增的标签;
目前只有 Firefox 和 Chrome 浏览器支持<bdi>标签 。
<bdi>标签主要是让文字的方向发生变化,从左向右或者从右向左。
<bdi dir="设置文本方向">元素内容</bdi>
<bdi>标签控制文本方向是通过属性dir实现的
属性名称 | 属性值 | 说明 |
---|---|---|
dir | ltr | 设置文本方向从左向右显示 |
rtl | 设置文本方向从右向左显示 | |
auto | 默认值 |
ltr是英文词组“left to right”的首字母缩写;
rtl是英文词组“right to left”的首字母缩写。
<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>标签后面是英文字符、中文汉字等强字符,就不会按照从右向左的方向显示,如果是数字,则会按照从右向左的方向显示;
【上一篇】HTML代码applet标签的用法及作用
【下一篇】HTML代码basefont标签的用法及作用