text-overflow: ellipsis在中英文混排时失效，需用overflow-wrap: break-word等配合；firefox不支持-webkit-line-clamp会导致无省略号而全文显示；lang属性影响断行行为，应按语言分组调优css。
text-overflow: ellipsis 在中英文混排时失效
中文字符天然可断行，但英文单词（如 useCallback、https://example.com/very-long-path）默认不折行，哪怕容器极窄，也会撑破 width，导致 text-overflow: ellipsis 完全不触发。
必须显式启用软换行机制：
-
overflow-wrap: break-word（推荐）：只在必要时劈开长单词，保留大部分词的完整性 -
word-break: break-all：强制在任意字符间断行，可能把JavaScript截成JavaScri…，影响可读性 -
hyphens: auto+lang="en"：对英文启用连字符断行，但 Safari 旧版和部分 Android WebView 不支持
示例完整写法：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; —— 注意 white-space: nowrap 和 overflow-wrap: break-word 同时存在时，后者仅对英文生效，中文仍保持单行截断逻辑。
Firefox 不支持 -webkit-line-clamp 的真实后果
不是“没省略号”，而是整个 -webkit-line-clamp 块被 Firefox 忽略，元素退化为普通块级元素：文字照常换行、高度自适应、overflow: hidden 依然生效，但不会裁出省略号——用户看到的是完整多行文本溢出容器，或因未设 height 而撑开布局。
若必须兼容 Firefox，有两条路：
- 放弃 CSS 多行截断，改用 JS 动态计算：取
line-height × maxLines得最大允许高度，再用scrollHeight > clientHeight判断是否溢出，最后用正则或字数截断 + 补… - 用伪元素模拟（
::after）：设固定height+position: relative，再用::after覆盖右下角。但需手动调padding-right和background遮底，且与图标类::before易冲突
别信“加 height 就能兼容”——height 只防止撑开，不能唤回省略号。
lang 属性影响 text-overflow 行为
lang 不只是 SEO 或语音朗读用的，它会影响浏览器对断行规则的选择。比如 lang="zh" 下，Chrome 对中文的 overflow-wrap: break-word 更激进；而 lang="ja" 下，某些长片假名组合可能被整体保留不换行。
实操要点：
- 每个文本容器都应明确设置
lang，避免继承根节点的错误值 - 中英混排场景，优先用
lang="zh"（中文为主），再局部包裹英文段落并设lang="en" - 不要依赖
lang实现截断逻辑——它只辅助断行，不替代text-overflow三件套
错误写法：<div lang="en">订单号：ORD-2026-XXXXXX</div> → 英文订单号被当作纯英文处理，易撑破容器；正确应是外层 lang="zh"，内层用 <span lang="en">ORD-2026-XXXXXX</span>。
国际化文案长度差异带来的布局风险
同一文案翻译成不同语言后，字符数可能差 2–3 倍（如英文 “Save” → 法语 “Enregistrer” → 德语 “Speichern”）。CSS 截断依赖固定行高和字符密度，但德语单词长、空格少，实际占用宽度远超预估；日语假名密度高，同样字符数反而更紧凑。
应对策略不是统一设 max-width，而是：
- 按语言分组定义 CSS 类，例如
.text-zh、.text-de、.text-ja，分别调优line-height、font-size和max-lines - 服务端返回文案时，附带
lang字段，前端动态加 class，避免硬编码语言判断 - 预留 10%–15% 容器余量，尤其按钮、标签等紧凑组件，别让截断成为唯一防线
最隐蔽的坑：同一组件在不同语言下用了同一套 -webkit-line-clamp: 2，结果德语显示 1.2 行，日语显示 2.8 行——表面都“截了”，实际体验割裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
