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

HTML5标签:bdo元素的使用方法及作用

html元素中的<bdo>标签是html5新增的,“bdo”是英文单词“Bi-Directional Override”的缩写,有“覆盖”意思,那么,<bdo>标签的用法及作用有哪些呢?

<bdi>标签定义

<bdo>标签用来覆盖默认文本方向,可改变文本排序的显示方向;

<bdo>标签是双标签,必须有开始标签和结束标签;

<bdo>标签是HTML5新增的标签;

<bdo> 标签必须配合 dir 属性使用。

<bdo>标签已被所有主流浏览器支持

<bdi>标签格式

<bdo>标签主要定义页面文本排序的显示方向,用于想要改变排序的文本。

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

<bdo> 标签的dir属性有 ltr 和 rtl 两个属性值,分别表示:从左到右显示文本和从右到左显示文本。

属性名称属性值说明
dir
ltr从左向右显示文本
rtl从右向左显示文本

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

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

<bdi>标签用法

<bdo>标签里面的文本内容会按照dir属性设置的排列方向显示。 

1、设置<bdo>标签包裹的文本从左向右的方向

<p>This <bdo dir="ltr">is</bdo> seventeen years.</p>

当我们设置dir="ltr"时,以上代码显示结果为:This is seventeen years.

2、设置<bdo>标签包裹的文本从右向左的方向

<p>This <bdo dir="rtl">is</bdo> seventeen years.</p>

当我们设置dir="rtl"时,以上代码显示结果为:This si seventeen years.

3、如果<bdo>标签后面是数字的话,该数字也会和<bdo>标签内的文本按照dir属性设置的方向显示:

<p>This <bdo dir="rtl">is</bdo> 17 years.</p>

以上代码显示结果为:This 17 si  years.



欢迎您发表评论或留言