必须给flex子项加min-width: 0，否则其默认min-width: auto会阻止收缩，导致overflow:hidden和text-overflow:ellipsis失效；还需配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束（如flex: 1 1 0或max-width: 100%）。
多语言网站文字溢出，根本不是“加个 overflow: hidden 就能压住”，而是中英文、日文、阿拉伯文混排时，字体渲染差异 + 宽度计算逻辑不一致 + 弹性容器收缩机制失效三者叠加的结果。最常踩的坑是：在 flex 布局里只设 max-width，却忘了给子项加 min-width: 0。
Flex 子项不收缩导致文字撑破容器
英文单词（如 useCallback）、长 URL、未断行的阿拉伯数字串，在弹性布局中会无视 max-width 强行撑开父容器。这不是 bug，是 Flex 默认行为：子项 flex-shrink: 1 但 min-width 是 auto，浏览器优先保内容完整而非布局稳定。
- 必须给文本容器加
min-width: 0—— 这是让flex-shrink真正生效的开关 - 若用
display: flex包裹文本，别只靠flex: 1，得显式写flex: 1 1 0（即flex-shrink: 1+flex-basis: 0） - 表格类布局中，
table-layout: fixed+<col width="30%">比纯 CSS 更可靠，尤其对 RTL 语言（如阿拉伯语）
中英文混排下 text-overflow: ellipsis 失效
text-overflow: ellipsis 在中文环境看似好用，一加英文就失效——因为浏览器默认不拆分英文单词，width 计算被一个长词拉爆，overflow 根本没机会触发。
- 补
overflow-wrap: break-word或word-break: break-word，但注意：break-word可能在单词中间硬切，break-all更激进，适合纯 ID/URL 场景 - 若需保留语义断点（比如不拆 “JavaScript”），用
hyphens: auto+ 对应语言的lang属性（<p lang="en"></p>） - 伪元素方案（
::after盖省略号）在 RTL 语言中要额外加direction: rtl和right: 0，否则省略号跑左边
动态语言切换时宽度重算失败
用户从中文切到德语，文案长度可能翻倍；切到阿拉伯语，文本方向反转。此时靠初始 CSS 声明的 width 或 max-width 会立刻失准，text-overflow 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 别在 DOMContentLoaded 时测宽 —— WebFont 加载延迟会让
offsetWidth偏小，得等document.fonts.load('1em "Noto Sans Arabic"')完成后再测 - 监听
resize和languagechange事件（window.addEventListener('languagechange', ...)），触发后用requestAnimationFrame重测scrollWidth与clientWidth - 重置动画或截断逻辑时，先清空
style.animation，再setTimeout(() => el.style.animation = '...')，避免 Safari 跳帧
真正难的不是写对那几行 CSS，而是所有语言的字体加载时机、Flex 收缩阈值、RTL 渲染顺序这三件事在运行时同步对齐——漏掉任意一个，溢出就会在某个小语种用户身上复现。
