dir属性仅支持ltr、rtl、auto三个值：ltr为默认值，用于英语等左到右语言；rtl用于阿拉伯语等右到左语言，影响标点、光标、剪贴板等底层行为；auto依赖首字符判断方向但极易误判，线上项目不推荐使用。
dir 属性的三个取值：ltr / rtl / auto
dir 属性只有三个合法值：ltr、rtl 和 auto，但它们的适用场景和行为差异很大，不能混用。
-
ltr是默认值，表示“从左到右”，适用于英语、中文、日语等绝大多数语言；显式写上它通常只为覆盖父级dir="rtl"，比如在阿拉伯语页面里嵌一段英文段落 -
rtl表示“从右到左”，用于阿拉伯语、希伯来语、波斯语等；它不只是让文字右对齐，还会改变标点位置、Tab 键顺序、剪贴板粘贴逻辑、input光标起始位置等底层行为 -
auto让浏览器根据内容首个强方向字符自动判断——但实际非常脆弱：遇到空格、数字开头、异步加载文本、或首字符是中性符号（如冒号、括号）时，不同浏览器可能给出不同结果；线上项目基本不推荐用
bdo 标签的 dir 属性只认 ltr 和 rtl
是专门做双向文本强制覆盖的标签，它的 dir 属性**不支持 auto**，写了也会被忽略。
-
مرحبا会强制把 “مرحبا” 当作 RTL 文本渲染（哪怕它其实是阿拉伯字母写的西班牙语） -
Hello不会生效，浏览器按默认 LTR 处理，等同于没写dir - 这个限制不是 bug，而是设计使然：
bdo的语义就是“我明确要覆盖方向”，所以必须显式指定ltr或rtl
dir="auto" 在哪些地方容易翻车
dir="auto" 看似省事，但在真实项目里出问题的概率远高于收益。
- Vue/React 动态渲染时，若初始内容为空或只含空格，
dir="auto"会按父级方向锁定，后续插入阿拉伯文本也不会重算 - 用户粘贴一段带前导空格或换行符的 RTL 文本，首个强方向字符识别失败，结果仍按 LTR 渲染
- 服务端渲染（SSR）时，若首字符尚未下发，HTML 已生成并被浏览器解析，方向就定死了
- 表单控件（如
textarea）设了dir="auto"，但用户还没输入，placeholder 会按错误方向显示，光标也停在左边
真正难的不是选哪个值，而是加在哪一层
加 dir 最容易犯的错，是以为“整个页面设一次就完事”。实际上，dir 是继承的，但继承链上任意一层都可能被第三方组件、CSS 逻辑属性或内联样式干扰。
- 全局设
后，所有margin-left类名（如 Bootstrap 的ms-2）都会反转，但图标库可能没适配，导致按钮图标跑到右边甚至溢出 - 一个
div dir="rtl"里嵌了个 React 子组件，而该组件内部又用了dir="ltr"控制某段 URL，这时得确认它没被父级 CSS 的direction: rtl覆盖（dir属性优先级更高） - 滚动条出现在左边是
dir="rtl"的副作用，但如果你只改了body.dir，而没同步处理overflow-x: hidden或自定义滚动条样式，可能出现横向滚动异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
