HTML bdi 标签 - 绿叶网

HTML bdi 语法

在 HTML 中，bdi 标签用于隔离一段文本，使其不受周围文本排版的影响，从而避免出现排版错乱的情况。

bdi 标签常用于多语言混排、或从右到左（RTL）和从左到右（LTR）混合显示的场景，对于处理混合方向性的内容（比如嵌套不同语言的文本、或显示数学表达式）特别有用。

语法：

<bdi>文本内容</bdi>

说明：

bdi 标签的使用很简单，只需把要隔离的文本放在 bdi 标签内即可。

HTML bdi 摘要

属于	HTML 标签
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

HTML bdi 示例

接下来，我们通过一个简单的例子来讲解一下 HTML bdi 标签是如何使用的。

示例：bdi 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <base href="https://www.lvyenet.com/">
</head>
<body>
    <p><bdo dir="rtl">绿叶网 - 为好教程，全力以赴</bdo></p>
    <p><bdo dir="rtl"><bdi>绿叶网</bdi> - 为好教程，全力以赴</bdo></p>
</body>
</html>

页面效果如下图所示。

HTML bdi标签示例

分析：

在上面例子中，第 2 个 p 标签使用了 bdi 标签包含着 “绿叶网” 这个文本，因此即使外面使用了 bdo 标签设置文本方向为从右到左，<bdi> 绿叶网 </bdi> 中的文本也不会改变（依然是从左到右方向排列）。