dir="auto"仅依据首个强方向字符一次性判断方向，遇ASCII字母、数字、空格、中日韩字符或动态内容时均fallback至ltr，线上项目应避免依赖，优先显式设置dir="ltr"/"rtl"或用隔离混排文本。
dir="auto" 确实会让浏览器根据首字符判断方向，但它的行为远比“自动识别语言”要机械得多——它只看第一个强方向性字符，且只判断一次，不重算、不回溯、不感知上下文。
为什么dir="auto"经常失效
浏览器对 dir="auto" 的实现严格遵循 Unicode 双向算法（UBA）的初始方向判定规则，而非语义理解。以下情况会直接 fallback 到 ltr：
- 首字符是 ASCII 字母、数字或空格（如
"Hello"、"v2.4.1"、" نص"） - 首字符是中文/日文/韩文（Unicode 属于 “weak” 类别，无固有方向）
- JS 动态设置
innerHTML后，不会重新触发方向推断 - Vue/React 中初始内容为空或含前导空白，
dir="auto"锁定为ltr后不再更新 - SSR 渲染时 HTML 已生成，但真实文本尚未注入，方向就定死了
dir="auto" 唯一能可靠生效的场景
仅当元素内容以明确的 RTL 强方向字符开头，且无前导干扰时才有效：
-
<p dir="auto">مرحبا</p>→ 正确识别为 RTL（م是阿拉伯字母，强 RTL） -
<input dir="auto" value="שלום">→ 正确识别为 RTL（ש是希伯来字母） -
<div dir="auto">النص هنا</div>→ 可行，前提是ا真实存在且未被空格/换行遮挡
注意：dir="auto" 对 <input> 和 <textarea></textarea> 有一定价值，因为 placeholder 和用户输入可能方向不一，但必须确保其 value 或初始 innerText 真以强方向字符起始。
比 dir="auto" 更稳妥的替代方案
线上项目几乎从不依赖 dir="auto" 做主方向控制。更可控的做法是：
- 整页 RTL：直接设
，lang必须同步，否则字体连字、数字样式、屏幕阅读器语音均异常 - 局部混排：对 LTR 片段显式用
<bdi></bdi>包裹，例如<p dir="rtl">النص بالعربية <bdi>https://example.com</bdi></p> - 动态内容：JS 插入前先检测首字符方向，再手动设
el.dir = "rtl"或"ltr"，不要指望 DOM 自动修正 - 表单控件：始终显式声明
dir="rtl"或dir="ltr"，dir="auto"在旧版 Safari 和 Android WebView 中常完全不触发
真正容易被忽略的是：dir="auto" 不是“懒人开关”，而是一个极易被环境细节击穿的窄口径机制。一旦页面涉及多语言混排、动态渲染或第三方组件，它基本等于没设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
