首页 » 编程语言 » html » 正文

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实现的

属性名称属性值说明
dir
ltr设置文本方向从左向右显示
rtl设置文本方向从右向左显示
auto默认值

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、设置文本从右向左的方向

2019-12-06_003938.png

从上图可以发现:

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

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

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



欢迎您发表评论或留言