阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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 事件属性

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录