应优先使用 word-break: keep-all 保中日韩语义完整，overflow-wrap: break-word 处理长url等无空格内容；二者需配合 white-space: normal 使用，避免混用或倒置导致断行异常。
多语言文本换行：word-break 和 overflow-wrap 怎么选
中文、日文、韩文（CJK）和英文混排时，浏览器默认不给中文断行，但长URL或技术术语又必须换行——这时候不能只靠 white-space: normal。关键在区分「要不要保语义」：word-break: keep-all 保住中文词组完整性，overflow-wrap: break-word 则专治超长无空格内容（比如 https://example.com/very-long-path-without-dashes）。
常见错误是把两者混用或倒置：比如对英文段落设 word-break: break-all，结果 JavaScript 被切成 JavaScrip…，破坏可读性；或者对中文标题加 overflow-wrap: break-word，其实它根本不起作用（因为中文没有“单词”概念）。
-
keep-all：适用于表格列、卡片标题等需保持 CJK 文本视觉完整的场景 -
break-all：仅用于固定宽容器内的纯技术字符串（如 API 响应体、命令行输出） -
overflow-wrap: break-word：优先用于含 URL、邮箱、哈希值等长无空格串的正文段落
响应式多行截断：-webkit-line-clamp 的实际限制
-webkit-line-clamp 看似简单，但它依赖 display: -webkit-box，而这个声明会破坏 Flex/Grid 子项的正常布局流。尤其在 React/Vue 组件中嵌套使用时，父容器若已是 display: flex，直接加 -webkit-box 会导致子元素尺寸计算异常，甚至文字被意外裁掉半行。
更隐蔽的问题是行高耦合：line-height 必须为无单位数值（如 1.4），若写成 20px 或 1.4em，不同字号下截断位置会漂移。另外，它不响应 font-size 的动态变化（比如用户缩放页面），除非配合 @media 或 clamp() 手动重设 -webkit-line-clamp 值。
- 务必用
display: block或独立 wrapper 包裹目标文本，避免与 Flex/Grid 直接冲突 - 设置
line-height: 1.4（非像素值），并确保父级font-size使用rem或em - 小屏（
max-width: 480px）建议降为-webkit-line-clamp: 2，否则三行在窄屏上只剩 1 行可见
兼容性兜底：@supports 和 JS 截断怎么配合
@supports (-webkit-line-clamp: 2) 可以安全启用 CSS 截断，但别忘了：它只检测属性是否存在，不保证渲染一致。比如 Safari 15.4 在某些字体组合下仍会多显示半行。真要降级，JS 截断不能简单按字符数切——中文、英文、emoji 字符宽度不同，得用 canvas.measureText 或 getBoundingClientRect() 动态测宽。
另一个坑是 SSR 场景：服务端渲染时无法执行 JS，若只靠客户端 JS 截断，首屏会闪现完整文本。稳妥做法是服务端预估行数（基于字符数 + 字体平均宽度），生成带省略号的 HTML，再由 CSS 或 JS 二次校准。
- 用
@supports包裹整个截断样式块，不要只包-webkit-line-clamp单条声明 - JS 降级优先用
element.scrollWidth > element.clientWidth判断是否溢出，而非硬编码字符数 - 避免在
resize事件里高频调用测量逻辑，加requestAnimationFrame节流
中英文混排时 white-space 的隐藏影响
white-space 不只是控制换行，它还决定空格、换行符、制表符是否生效。比如后端返回的富文本中带 \n，若设了 white-space: nowrap，这些换行符就全失效；反过来，设 white-space: pre-wrap 又可能让英文单词间多余空格撑开布局。
最常被忽略的是 white-space: normal 对 CJK 的“假友好”：它允许中文在任意字间换行，但没开启 word-break: keep-all 时，浏览器仍可能在标点（如顿号、逗号）后断行，导致语义断裂。所以中英文混排段落，推荐组合写法：
.mixed-text {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
}
-
white-space: normal保留基础换行能力 -
word-break: keep-all锁定中文不断词，同时不影响英文按空格断行 -
overflow-wrap: break-word应对英文长单词或 URL 溢出
真正难处理的不是单个属性，而是它们叠加后的渲染优先级——word-break 会覆盖 overflow-wrap 的行为，white-space 又会压制前两者的换行机会。调试时先关掉其他两个，单独验证一个属性，比堆砌一堆声明更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
