unicode-bidi 双向文本属性

最后更新：2026-09-13

unicode-bidi unicode-bidi 双向文本属性

unicode-bidi 属性用于控制文本的双向排列算法（Unicode Bidirectional Algorithm），主要处理混合了不同方向文字（如英文与阿拉伯文）的场景。它可以改变文本的嵌入层级、覆盖方向或让元素脱离父级的方向上下文，是国际化网站中处理复杂文字方向的关键属性。

unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;

值	类型	描述
`normal \| embed \| isolate \| bidi-override \| isolate-override \| plaintext`	关键字	双向文本处理

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
unicode-bidi	✓ v10	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： isolate 值是最常用的，它让元素的方向不影响外部文本，也防止外部方向影响内部，适合嵌入第三方内容。

重要： bidi-override 会强制改变文本方向，可能导致文字显示顺序错乱，除非明确需要，否则建议使用 isolate 替代。

Qunicode-bidi 和 direction 有什么关系？

Adirection 设置文本的书写方向，unicode-bidi 控制该方向如何与周围文本交互。通常两者配合使用，direction 指定方向，unicode-bidi 指定隔离或覆盖行为。

Q什么时候需要使用 unicode-bidi？

A当页面混合了不同方向的文字（如英文中嵌入阿拉伯文），或需要嵌入第三方内容而不影响整体布局时，应使用 unicode-bidi: isolate 来隔离方向上下文。

Qunicode-bidi: isolate 和 bidi-override 有什么区别？

Aisolate 把元素内部的双向文本当作独立段落，方向互不影响，适合嵌入第三方或混合语言内容；bidi-override 则强制按 direction 覆盖所有字符顺序，容易打乱预期显示，仅特殊场景使用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。