flex布局中文字长度差异导致换行错乱，根本原因是CJK字符无空格、浏览器对长词收缩乏力及min-width默认值干扰；应设white-space:nowrap、min-width:0、flex:1 1 0px，并配合overflow:hidden与text-overflow:ellipsis。
flex布局中文字长度差异导致换行错乱
多语言场景下，中文、英文、日文混排时，flex容器内子项宽度不均，容易出现“本该单行显示的按钮/标签被强制折成两行”，尤其在小屏幕（如 iPhone SE）上更明显。这不是 flex 本身的问题，而是文字渲染宽度 + white-space + min-width 组合失控的结果。
常见错误现象：flex: 1 的按钮在英文长词（如 “Authentication”）下撑开、挤占相邻元素；日文假名+汉字组合在 iOS Safari 中突然换行；中文按钮正常，但切换成英文后右侧图标被顶出容器。
- 确保所有文本容器设
white-space: nowrap，禁止非预期换行 - 给 flex 子项加
min-width: 0（关键！防止 Chrome/Firefox 下 text content 拉伸 flex 基础尺寸） - 避免对文字容器直接设
flex: 1，改用flex: 1 1 0px或显式flex-basis: 0 - 若需支持超长词（如 API 错误码
"ERR_CONNECTION_REFUSED"），配合overflow: hidden+text-overflow: ellipsis
中日韩文字在 flex 容器里被截断或溢出
问题本质是 CJK 字符没有空格分隔，浏览器默认不换行，而 flex-shrink 在某些引擎（尤其是旧版 Safari）中对无空格文本收缩乏力，导致内容直接溢出容器边界，甚至压垮整个布局。
使用场景：Tab 标签栏、卡片标题、表头文字 —— 这些地方常要求“尽量不换行、不溢出、不缩放字体”。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
overflow: hidden，否则 Safari 会无视text-overflow -
text-overflow: ellipsis仅对块级元素生效，所以要确认文字容器是display: block或inline-block - 如果父容器是
display: flex，且子项是<span></span>，需额外加width: 0或min-width: 0才能触发 ellipsis - Android WebView 和 iOS 15.4+ 对
text-overflow支持稳定，但 iOS 14 及更早需测试flex-basis: 0是否生效
font-language-override 和 font-feature-settings 不解决宽度问题
有人试图用 font-language-override: "jpn" 或 font-feature-settings: "smpl" 控制日文字形变体，以为能统一字符宽度 —— 实际上这些属性只影响字形选择，不影响排版盒尺寸计算，对 flex 分配空间毫无作用。
真正影响宽度的是：字体文件中每个字形的 advance width、浏览器对 CJK 字符的 baseline 对齐策略、以及是否启用 font-metrics-overrides（目前仅 Chromium 实验性支持）。
- 别在 flex 适配中依赖
font-feature-settings，它不改变盒模型 - 中文字体（如
system-ui）在 iOS 上默认启用「标点挤压」，可能让「，。！」等符号变窄，间接影响总宽 —— 若需精确控制，建议用text-rendering: optimizeLegibility并接受微小浮动 - 测试时务必用真机：Simulator 和 DevTools 的设备模拟无法复现 WebKit 对 CJK 文字的渲染差异
rem/vw 配合 flex 会导致多语言下字号失衡
用 vw 设定文字大小（如 font-size: 4vw）看似响应式，但在多语言中会放大问题：英文单词平均字符数多，视觉密度低；中文单字信息量高，同样 4vw 下显得拥挤。结果是中英文切换时，按钮高度突变、图标对不齐、行高崩塌。
性能影响：频繁 resize 触发重排，尤其在 iOS Safari 中，vw 值变化会连带触发 flex 重新分配，卡顿明显。
- 优先用
rem+ 媒体查询分档（如@media (max-width: 375px) { html { font-size: 14px; } }） - 若必须用
vw，限制范围：font-size: clamp(14px, 4vw, 18px)，并确保line-height是无单位数值（如1.4） - 对按钮/标签类组件，用
min-height固定容器高度，比靠文字撑开更可控 - 中英文混排时，可对
[lang="en"]单独加大letter-spacing（如0.02em），缓解视觉密度过高
最麻烦的不是写多少 CSS，而是同一段 flex 布局在 iOS Safari、Chrome Android、微信内置浏览器里，对「あいうえお」和「Authentication」的宽度计算逻辑完全不同 —— 测试必须覆盖三端真机，不能只信 DevTools 的 layout 面板。
