多语言文本崩坏根因是lang和dir未在每个语言区块成对设置，且物理CSS属性锁死布局；必须用margin-inline-start等逻辑属性替代left/right，并确保动态内容显式声明lang与dir。

多语言文本在响应式布局中间出现崩坏，90%并非样式问题，而是HTML结构和属性未正确配对。单纯调整CSS、更换字体、添加media query等操作都无济于事——按钮撑破容器、标点塌陷、RTL文字镜像错位等问题，根源都在于lang和dir未同步、容器被物理属性限制、语义标签被不当使用。

lang 和 dir 必须成对出现在每个语言区块上

浏览器不会自动推断混合文本的方向边界。中英夹杂的段落里，英文括号可能被Bidi算法误判为RTL内容而翻转；阿拉伯数字在中文段落里被从右往左念，都是因为lang和dir只设在上，没下放到具体元素。

• 才是中文段落的正确起点；才能安全嵌入阿拉伯短语

• 只写lang="ar"不写dir="rtl"：Safari里输入框光标乱跳、Chrome语音合成把“١٢٣”读成“321”
• 只写dir="rtl"不写lang="ar"：字体回退用默认西文字体、引号渲染成英文、拼写检查失效
• 动态切换语言时，必须同时更新document.documentElement.lang和所有带lang的子节点，不能只改根节点

用逻辑属性替代物理方向 CSS

margin-left、left、text-align: right这类写法在RTL语言下会直接失效或反向错位。它们绑定的是屏幕物理位置，不是文本流向。

• 把margin-left: 16px换成margin-inline-start: 16px，配合dir="rtl"自动映射为margin-right
• 绝对定位必须用inset-inline-start代替left，否则下拉菜单箭头在阿拉伯语下仍钉在右侧
• text-align: start才真正对应“内容起始侧”，text-align: left在RTL下还是左对齐，违背用户预期
• 伪元素::before里写left: 0？立刻翻车——必须用inset-inline-start: 0，否则图标和文字流向脱节

容器不能设固定宽高或绝对定位

德语“Zurücksetzen”比英文“Reset”长一倍，日文“検索”和英文“Search”同列时宽度需求完全不同。一旦用width、min-width或position: absolute锁死尺寸，浏览器就失去按内容伸缩的能力。

• 按钮别写width: 120px，改用max-width: none覆盖组件库默认限制（如Bootstrap的.btn）
• 表格禁用table-layout: fixed，否则混排时列宽无法随内容自适应
• 表单控件别用position: absolute定位，翻译后文案变长，坐标立刻失准
• 必须包裹，不能只靠for属性绑定——否则label宽度变化，点击热区偏移

语义化标签 + 弹性容器是唯一可靠基础

非语义化写法（比如用

模拟按钮、用data-i18n挂空标签）会让翻译后的交互和视觉完全失控。结构决定伸缩上限，CSS只是修饰层。

• 按钮统一用，别用

  ——后者翻译失败时无文字、无内边距，视觉坍缩

• 多行提示语、错误信息用

  而非

  ，并确保父容器有word-break: break-word

• 图标+文字组合必须用显式包裹结构，禁用伪元素生成文字——伪元素无法被i18n工具扫描
• AJAX加载的弹窗等动态插入DOM，必须手动设置lang和dir，不能依赖继承；新节点里的中文若无lang，会被当英文断行

有一点常常被忽视：逻辑属性并非“开启后自动生效”，它强烈依赖于dir和lang这两个属性的同步设置。要是漏掉任何一个，就可能出现Safari里输入框光标移动混乱、数字格式异常，以及text-align: start对失效等问题——可别以为这是CSS的问题，其实是浏览器排版上下文根本没完整建立起来。