bdo 标签通过 dir 属性强制字符级视觉重排，非镜像翻转；必须显式声明 dir="ltr"/"rtl"，否则失效；复制粘贴和屏幕阅读器均读取原始顺序，不改变 dom 文本内容。
bdo 标签确实能让文字“倒转”，但不是字面意义的镜像翻转，而是按 Unicode 双向算法（UBA）规则逐字符重排视觉顺序——dir="rtl" 会让 "abc" 显示为 "cba"，dir="ltr" 会让 "مرحبا" 显示为 "ابحرم"。这不是样式切换，是渲染层强制覆盖。
为什么 bdo 显示效果像“字符串反转”
因为 bdo 绕过了 UBA 的上下文感知逻辑，直接按 dir 值做字符级顺序重写：
-
bdo[dir="rtl"]把内部所有字符从右往左逐个绘制，不管它们原本是拉丁字母、阿拉伯数字还是希伯来字符 - 它不识别“单词边界”，也不保留空格语义——
<bdo dir="rtl">a b c</bdo>渲染为"c b a"，但空格仍按原始位置参与换行计算 - 这种效果在纯 ASCII 字符串上看起来像 JS 的
.split('').reverse().join('')，但原理完全不同：一个是 DOM 渲染指令，一个是字符串操作
bdo 必须带 dir 属性，且只接受 "ltr" 或 "rtl"
漏写 dir 或写错值，bdo 就完全失效：
-
<bdo>hello</bdo>→ 无任何方向变化，等价于普通文本 -
<bdo dir="auto"></bdo>→ 无效，HTML 规范明确禁止bdo使用auto -
<bdo dir="RTL"></bdo>→ 在 XHTML 或严格解析模式下可能被忽略（大小写敏感） - 父元素的
dir不会继承，bdo必须显式声明
复制粘贴时，bdo 内容还是原始顺序
这是最容易踩的坑：视觉上看到的是反转结果，但 DOM 文本节点内容没变，剪贴板拿到的仍是源字符串：
-
<bdo dir="rtl">Hello</bdo>屏幕显示"olleH"，但 Ctrl+C 复制出来是"Hello" - 如果前端用
document.execCommand('copy')或监听copy事件做校验，必须注意这个差异 - 屏幕阅读器也读原始顺序，所以对可访问性有影响——不能靠
bdo隐藏敏感信息或伪装内容
真正该用 bdo 的场景极少，别拿它当 text-align 用
多数所谓“需要倒序”的需求，其实该用其他方式：
- 让阿拉伯语段落在英文页面中正常右对齐 → 用
bdi，不是bdo - 整块内容是 RTL 语言 → 直接给容器设
dir="rtl"，无需包裹bdo - 想让数字在 RTL 文本里保持左到右顺序 → Unicode 本身已处理，不用干预
- 调试 UBA 行为、展示算法异常对比、命令行模拟光标移动方向 → 这才是
bdo的合理用途
最常被忽略的一点：嵌套 bdo 会逐层覆盖方向指令，外层 dir="rtl" + 内层 dir="ltr" 不是“抵消”，而是先翻一次再翻一次，最终效果取决于嵌套深度和字符数，极易失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
