<bdi>: 双向隔离标签
最后更新：2026-10-13
<bdi>双向隔离标签
双向隔离元素，将其中的文本当作独立片段处理方向（LTR/RTL），避免用户名、评论等混入周围文字的方向。
| 分类 | 文本内容 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </bdi> 标签 |
| 状态 | 标准 |
📝 语法
<bdi>用户名</bdi>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <bdi> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： bdi 与 dir=auto 类似但更强——它创建隔离边界，适合展示不可控的用户内容。
❓ 常见问题
Qbdi 标签是做什么用的？
A
<bdi>（Bi-Directional Isolation）把一段文字与周围文字的方向隔离，防止混排时顺序错乱。典型场景：用户名、评论列表里混入阿拉伯语/希伯来语内容时，避免标点和数字的显示顺序被带乱。Qbdi 和 unicode-bidi 属性有什么区别？
A
<bdi> 是语义化的现成方案，浏览器自动判断内部文字方向并隔离；CSS 的 unicode-bidi: isolate 是底层机制，效果类似但需要手动指定 direction。优先用 <bdi>，省心且语义明确。Q什么时候必须用 bdi？
A展示「不可控的第三方文本」时：评论作者名、聊天昵称、文件名列表等。例如
<li><bdi>أحمد</bdi>：评论内容</li>，无论用户名是什么语言，都不会影响整行布局方向。静态、自己撰写的混排文字通常用不到。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
