多语言排版需以弹性HTML结构为前提，固定宽高、绝对定位、table-layout: fixed、非语义化标签、缺失lang属性等均会导致结构性崩坏，CSS无法弥补。
多语言排版不是“翻译完再调样式”就能解决的事——HTML结构本身必须具备弹性，否则德语按钮撑爆、日文表格错位、中英文混排标点塌陷，都是结构性缺陷，不是CSS能救回来的。
别给容器设固定宽高或绝对定位
这是国际化排版崩坏的第一推手。浏览器按内容自动计算尺寸的能力，一被width、min-width或position: absolute锁死，就彻底失效。
-
<button>上写width: 120px？德语“Zurücksetzen”直接溢出或换行错位 - 表单控件用
position: absolute定位？翻译后文案变长，坐标立刻失准 -
<table>加了table-layout: fixed？日文“検索”和英文“Search”同列时互相挤压，列宽不随内容伸缩 - 组件库默认限制（如 Bootstrap 的
.btn最大宽度）需用max-width: none覆盖
用语义化标签 + 弹性容器承接动态文本
结构决定伸缩上限。非语义化写法（比如用<div>模拟按钮或列表）会让翻译后的行为完全失控。
-
<label>必须包裹<input>，不能只靠for属性绑定——否则 label 宽度变化，点击热区偏移 - 按钮统一用
<button></button>，别把data-i18n挂在空标签上；翻译后无文字+无内边距，视觉坍缩 - 多行提示语、错误信息用
<div role="alert">而非<p>，并确保父容器有word-break: break-word - 图标+文字组合必须用
<svg></svg>显式包裹结构，禁用伪元素生成文字——伪元素无法被 i18n 工具扫描，也绕过 DOM 更新
lang 属性必须精确声明且动态同步
没lang，浏览器就按默认英文规则处理所有文字：中文标点间距异常、日文连字失效、阿拉伯文从左到右渲染——这不是 bug，是放弃控制权。
立即学习“前端免费学习笔记（深入）”；
-
<html lang="zh-CN">必须存在，值严格为 BCP 47 格式（如ja-JP、de-DE），zh或zh_cn会被忽略 - 中英混排段落里，英文部分要显式加
<span lang="en">Hello</span>，否则中文顿号、书名号按西文逻辑渲染 -
<pre lang="bash">这类代码块保留原有lang，不要被全局语言切换覆盖——这是合法混排，不是错误 - AJAX 加载的弹窗等动态插入 DOM，必须手动设置
lang属性，不能依赖继承；新节点里的中文若无lang，会被当英文断行
验证 HTML 结构是否真正兼容多语言
很多问题在开发阶段看不见，上线后才爆发。W3C Validator 不是摆设，它是卡住结构性风险的最后防线。
- 报错
Element “button” must not be empty？说明按钮只有data-i18n没 fallback 文字，翻译失败时会显示空白按钮 - 检查所有
<button>、<input type="submit">是否都有可见文案（哪怕只是英文 fallback） - 确认所有
<table>没设table-layout: fixed，所有<select>没写死width - CI 流程里加入
lang属性存在性检查和button非空校验，比人工测试更可靠
最易被忽略的点：多语言不是“翻译完就结束”，而是每次文案变更都可能触发 HTML 结构压力测试——德语词长30%，日文字符密度高，阿拉伯文双向混排，这些不是边缘 case，是常态。结构没弹性，再多 CSS hack 都只是临时止血。
