HTML中dir属性控制文字方向的三个取值是：ltr、rtl 和 inherit。

HTML 的 `dir` 属性虽仅有 `ltr`、`rtl` 和 `auto` 三个取值，却深刻影响文本渲染、光标行为、表单交互甚至布局逻辑——`ltr` 和 `rtl` 是明确可控的基石，而看似省事的 `auto` 在动态内容、异步加载、空格/数字开头等真实场景中极易误判、跨浏览器不一致，线上项目应坚决弃用；更需警惕的是，`dir` 的继承性与 CSS `direction`、第三方组件、框架渲染机制相互交织，错误地“全局设置一次”反而引发图标错位、滚动条异常、placeholder 方向错误等连锁问题，真正考验开发者的是对方向语义的精准分层控制，而非简单套用取值。

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 或自定义滚动条样式，可能出现横向滚动异常

到这里，我们也就讲完了《HTML中dir属性控制文字方向的三个取值是：ltr、rtl 和 inherit。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！