dir="auto"仅依据首字符的强方向性一次性判断方向，遇ascii字母、数字、空格或中日韩字符即fallback至ltr，且不重算；动态内容、框架渲染及旧版浏览器中极易失效，线上关键区域应显式指定dir="ltr"/"rtl"或用隔离混排文本。
dir="auto"靠什么判断方向
它只看第一个强方向性字符（Strong Directional Character）：阿拉伯字母、希伯来字母、拉丁大写字母 A–Z、小写字母 a–z、基本数字 0–9 都算。但这个“看”是一次性的、静态的，且不考虑上下文。
常见失效现象：مرحبا 123 → 正确识别为 RTL；123 مرحبا → 强制 fallback 到 ltr； مرحبا（开头空格）→ fallback 到 ltr；你好 أهلا → 中文首字符无方向性，同样 fallback 到 ltr。
哪些场景下dir="auto"会彻底失灵
- 首字符是 ASCII 字母、数字、空格、制表符或换行符 —— 直接当
ltr处理，哪怕后面全是阿拉伯语 - 首字符是中文/日文/韩文 —— 这些属于“中性字符”，浏览器无法据此推断方向，一律 fallback 到
ltr - JS 动态插入内容（如
el.innerHTML = text）后，不会重新触发方向检测 - Vue/React 初始化时若内容为空或含前导空格，
dir="auto"锁定方向后不再更新 - Safari 旧版本和部分 Android WebView 对
dir="auto"支持不完整，甚至直接忽略
该用dir="auto"还是？关键看数据来源
dir="auto"适合结构固定、内容不可控但风险低的内联文本，比如用户评论昵称、文件名显示；但它不是“智能识别”，只是首字符试探。
真正需要隔离混排方向的动态内容（如 API 返回的用户名、URL、搜索关键词），必须用 <bdi></bdi>：
✅ <bdi>{{username}}</bdi> —— 触发独立 Bidi 上下文，不影响父级，也不翻转数字顺序
❌ <span dir="auto">{{username}}</span> —— 首字符是英文或数字时方向错，还可能把整个容器拖进错误流向
❌ <bdo dir="rtl">{{username}}</bdo> —— 强制逐字符重排，أحمد123 变成 321أحمد，完全不可读
为什么不能只靠CSS的direction: rtl
direction: rtl只是视觉对齐控制，不参与 Unicode 双向算法（UBA）—— 光标位置、选区行为、Tab 流、getSelection().anchorOffset、复制粘贴顺序全都不受影响。
典型症状：<input style="direction: rtl"> 输入阿拉伯语时退格键跳位、双击选词反向、粘贴英文 URL 后顺序颠倒；而 <input dir="rtl"> 才能真正修复这些。
更关键的是：dir 是 HTML 层语义属性，决定浏览器如何解析文本逻辑流向；direction 是 CSS 渲染指令，只管“怎么画”，不管“怎么读”。两者不能互换。
input、textarea）必须显式设 dir，哪怕页面已全局 dir 属性驱动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
