overflow-wrap: break-word在小屏失效，因其仅对无空格长英文单词生效，对中文长句无效；需配合white-space: pre-wrap或word-break: break-all，并用-webkit-line-clamp实现多行省略。
直接结论：仅靠 overflow-wrap: break-word 或 text-overflow: ellipsis 无法解决小屏幕下长文本的换行与截断问题——必须组合 white-space、overflow-wrap 和容器尺寸约束，且多行截断需额外依赖 -webkit-line-clamp。
为什么 overflow-wrap: break-word 在小屏上经常失效？
它只对“超长不可分割的单词”（如无空格URL、英文连写词）起作用，而对中文长句（如“这是一段没有空格的非常非常长的中文文本”）完全无效。因为中文没有天然单词边界，浏览器默认不会在字间断行，break-word 也无从介入。
- 常见错误现象：
max-width: 80px; overflow-wrap: break-word;下，中文仍横向溢出或触发水平滚动 - 根本原因：
white-space仍为默认值normal，但normal对纯中文不产生换行点（无空格/换行符） - 解决方案不是加更多
break-word，而是先让文本“有地方可断”——即用white-space: pre-wrap或显式插入（零宽空格）
white-space: pre-wrap 是小屏长文本换行的起点
它保留原始空格和换行符，同时允许在空格、制表符、换行符处自动折行——这对用户输入、API返回、Markdown摘要等真实场景最友好。
- 适用场景：评论区、日志预览、带缩进的说明文本、后端返回的含格式字符串
- 性能影响：IE9+ 原生支持，无渲染开销，比
pre更安全（不会禁用换行） - 注意兼容性陷阱：若后端返回的文本不含空格或换行符（如纯中文长句），
pre-wrap本身也不换行，此时需配合word-break: break-all或前端预处理插入 - 示例：
.text-mobile {<br> white-space: pre-wrap;<br> max-width: 100%;<br> overflow-wrap: break-word;<br>}
多行截断并显示省略号必须用 -webkit-line-clamp
text-overflow: ellipsis 只支持单行；多行省略是 WebKit 独占能力，目前仍是唯一稳定方案。
- 必要条件缺一不可：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: N+overflow: hidden - 响应式适配要点：用
rem控制line-height，避免不同字体大小下截断行数错位；用@supports (-webkit-line-clamp: 1)包裹，避免在不支持浏览器中破坏布局 - 容易踩的坑：若父容器用了
flex或grid，-webkit-box可能被覆盖，需确保层级干净；line-height必须是固定值（如1.4），不能用normal - 示例：
.summary {<br> display: -webkit-box;<br> -webkit-line-clamp: 3;<br> -webkit-box-orient: vertical;<br> overflow: hidden;<br> line-height: 1.4;<br>}
中文长句强制断字要慎用 word-break: break-all
它会在任意字符间断行（包括“北京”中间、“Python”字母间），适合技术日志、命令输出等对语义无要求的场景，但会严重损害可读性。
- 替代方案更推荐：
overflow-wrap: anywhere（Chrome 76+、Firefox 68+），它比break-all温和，优先保持单词完整，只在必要时断字 - 如果必须用
break-all，请限制作用域，例如只加在.log-entry code或表格td内，避免污染正文段落 - 移动端特别注意：iOS Safari 对
break-all的断行位置有时不稳定，建议在真机测试；Android Chrome 表现更一致
真正难的不是选哪个属性，而是判断文本来源——用户输入？后端 API？静态文案？每种来源决定了你该保留空格还是插入零宽空格，该用 pre-wrap 还是 anywhere，以及是否值得为多行省略增加 -webkit- 前缀的复杂度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
