HTML bdi 标签

🌙
手机阅读
本文目录结构

HTML <bdi>标签功能

bdi 指的是 bidi 隔离(Bi-directional Isolation)。

<bdi>标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

尽管同样的显示效果可以通过使用 CSS 规则 unicode-bidi:隔离<span>或者其他文本格式化元素,但语义信息只能通过<bdi>元素传递。特别是,当浏览器允许忽略 CSS 样式时,在这种情况下,使用<bdi>仍然可以保证文本正确显示,而使用 CSS 样式来传递语义时就显得毫无用处。

HTML <bdi>标签用法

将用户名从周围的文本方向设置中隔离出来:

<p dir="ltr"><bdo dir="rtl">这是一段 <bdi>从右向左</bdi> 排序的信息啊!</bdo></p>

HTML <bdi>标签演示

这是一段 从右向左 排序的信息啊!

浏览器支持

元素 Chrome IE 火狐 fafari
<bdi> Yes 不支持 Yes Yes

属性

  • dir

如同其他 HTML 元素一样,它包含全局属性,但是有一些语义上的细微差别:dir 属性不继承父元素。

如果没有设置,默认值即为 auto,以便浏览器根据元素内容决定元素内容的方向。

HTML4 与 HTML5 之间的差异

<bdi>标签是 HTML5 的新标签。

全局属性

<bdi>标签支持 HTML 全局属性

事件属性

<bdi>标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>