overflow-wrap: break-word是解决长单词或url溢出的首选方案，它在容器宽度不足时仅对无法换行的无空格字符串强制断词，优先保全正常单词语义，需配合white-space: normal和overflow: hidden使用。
长单词或URL溢出时用 overflow-wrap: break-word
容器宽度受限但内容含长无空格字符串（比如 https://example.com/very-long-path-with-no-spaces）时，white-space: normal 本身不解决换行问题——浏览器默认只在空格或CJK字符间断行。直接加 overflow-wrap: break-word（旧写法 word-wrap: break-word）是最轻量的补救：它允许在必要位置强行拆分单词。
注意两点：
– 必须配合 overflow: hidden 或 overflow: auto 才生效；
– 不影响正常英文单词的语义换行，只在“别无选择”时介入。
常见错误是只写 word-break: break-all，结果把 JavaScript 拆成 JavaScrip…，语义断裂。而 overflow-wrap: break-word 会优先保全单词，仅对真正无法处理的串下手。
中英文混排强制断行用 word-break: break-all
当容器极窄（如表格列宽固定为 120px），且内容含大量英文+中文混合、又不能依赖用户输入空格时，word-break: break-all 是唯一能确保不溢出的方案。
但它有代价：
– 英文单词会被任意字符截断，比如 responsive 可能变成 respon…；
– 对纯中文影响小（中文本就允许字间断行），但对中英混排的阅读节奏破坏明显；
– Safari 和 Chrome 行为一致，Firefox 从 v110+ 开始也完全支持，无需前缀。
建议仅用于后台管理类界面或数据表格等对可读性要求较低的场景。
多行文本响应式截断必须用 -webkit-line-clamp
要限制显示 2～3 行并加省略号，现代方案只剩 display: -webkit-box + -webkit-line-clamp 这一套组合。它不是“可选”，而是目前唯一被广泛支持的原生多行截断机制。
关键细节：
– -webkit-box-orient: vertical 不可省略，否则 -webkit-line-clamp 失效；
– 容器必须有明确的 height 或 max-height（即使设为 fit-content 也不行）；
– 响应式适配靠媒体查询改 -webkit-line-clamp 值，例如小屏设为 2，桌面设为 3；
– 不支持伪元素覆盖省略号样式，text-overflow 在这里只是开关，不是定制入口。
不用省略号的多行截断只能靠高度计算
如果设计要求“严格显示 N 行，多余内容不可见，也不许出现 …”，那就不能依赖 -webkit-line-clamp，得手动算高度：
-
line-height设为固定值（如1.5），避免字体缩放导致错位 - 容器
height=line-height × 行数（单位用em或rem更稳） - 必须加
overflow: hidden，且不能设padding-bottom，否则底部文字被裁掉半行 - 该方法在字体加载完成前可能闪动，需配合
font-display: swap或 JS 回调重绘
这个方案最脆弱的地方在于：一旦字体大小、行高、字号缩放比例或容器 padding 发生任何变化，高度就得重算。很多团队最后发现，加个省略号反而更鲁棒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
