CSS如何解决小屏幕上的长单词截断版面

优先用 overflow-wrap: break-word，它只在必要时折行且不破坏单词语义；flex/grid 容器需加 min-width: 0 才生效；移动端需双写 word-wrap 和 overflow-wrap；避免使用已废弃的 word-break: break-word。word-break 和 word-wrap（现在叫 overflow-wrap）到底用哪个小屏幕长单词撑破容器，本质是浏览器默认不折行。关键不是"要不要折"，而是"在哪折"------word-break 强制在任意位置断，overflow-wrap（旧名 word-wrap）只在必要时把整个单词挪到下一行或中间折开（需配合 break-word 值）。实际选哪个，看内容类型：英文技术文档、日志 ID、哈希值这类不可语义分割的字符串，用 overflow-wrap: break-word 更安全，避免把 user_id_123456789 拆成 user_id_123 + 456789纯中文或中英混排场景，word-break: break-word 或 break-all 效果接近，但 break-all 会把汉字也硬拆（如"苹果"拆成"苹"+"果"），一般不用如果容器宽度极小（比如窄侧边栏），且内容允许牺牲可读性保布局，才考虑 word-break: break-allflex 或 grid 容器里长单词不折行的隐藏原因很多人给父容器加了 display: flex 或 display: grid，再怎么设 overflow-wrap 都没用------因为 flex item 默认有 min-width: auto，会阻止内容收缩折行。必须显式覆盖：立即学习"前端免费学习笔记（深入）"；对 flex item 加 min-width: 0（或 overflow: hidden，后者会触发 BFC，间接重置 min-width）对 grid item 同样加 min-width: 0，尤其当它在 grid-template-columns: 1fr 这类弹性轨道里别依赖 white-space: normal，它默认就有，问题不在这里移动端 Safari 对 overflow-wrap 的兼容细节iOS 12.2+ 支持 overflow-wrap: break-word，但老版本（如 iOS 11）只认旧名 word-wrap: break-word。光写一个不够。 云从科技AI开放平台 云从AI开放平台