lang属性写错会导致中文引号变英文；必须用bcp 47标准码如zh-cn，否则safari渲染直角引号、chrome语音读错轻声、阿拉伯语方向反向；服务端应从路由或accept-language提取，前端切换后须立即执行document.documentelement.lang = 'zh-cn'。
lang属性写错会导致中文引号变英文
不设 lang 或设成 zh、cn 这类非标准值，浏览器就无法识别语言上下文。Safari 会把中文引号渲染成英文直角引号，Chrome 的语音合成会读错轻声和儿化音，阿拉伯语文字方向直接反掉。必须用 BCP 47 标准码，比如 zh-CN、en-US、ar-SA。
服务端渲染时从路由前缀（如 /zh/about）或 Accept-Language 头提取；前端切换语言后，立刻执行：document.documentElement.lang = 'zh-CN' —— 不更新这个，后续所有 :lang() 选择器和屏幕阅读器行为都失效。
text-overflow: ellipsis 在多语言下容易失效
中英文混排、日文无空格、德语长复合词，会让单行省略号逻辑崩溃。不是 CSS 写得不对，而是“溢出起点”算不准：中文字符宽度不固定，日文假名连写不换行，德语词长可能超过容器 width。
- 别只依赖
white-space: nowrap，对中文/日文加overflow-wrap: break-word - 对德语等长词语言，用
word-break: break-word（比break-all更保留语义断点） -
text-overflow: ellipsis必须配合display: block或inline-block，flex项目里还得加min-width: 0
表格和 flex 布局在语言切换后突然错位
语言切换后文本长度变化（比如 “Settings” → “设置” → “Einstellungen”），会撑开或压缩容器。表格默认 table-layout: auto，一列内容变长，整行宽度重算，其他列被挤压；flex 项目没设 min-width: 0，就会拒绝收缩，强行撑开父容器。
解决方案是提前锁定布局行为：
- 表格必须三件套：
table-layout: fixed+width: 100%+ 至少一个<col width="20%"> - flex 容器里的文本项加
flex: 1 1 0（即flex-shrink: 1+flex-basis: 0） -
<img>在表格或 flex 里必须配max-width: 100%，否则它绕过所有 flex 或 table-layout 控制
:lang() 选择器不能替代字体回退逻辑
:lang(zh) { font-family: "PingFang SC", "Microsoft YaHei"; } 这类写法只能控制样式，但字体 fallback 是由系统和浏览器决定的。如果页面 lang 没设对，即使写了 :lang(zh)，浏览器也不会触发中文字体链。
真正影响渲染的是 lang 属性本身 —— 它告诉浏览器：“这段文本按中文规则处理”，包括标点悬挂、断行策略、字距调整。CSS 的 :lang() 只是锦上添花，不是底层开关。
多语言切换时，最容易被忽略的是状态同步：除了更新 lang 和文本，还要重置 inputmode（比如阿拉伯语要软键盘数字+阿拉伯字符）、dir 属性（RTL 语言需 dir="rtl"），否则光标行为和输入体验会断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
