用 word-break 和 overflow-wrap 配合实现内容折行：优先 overflow-wrap: break-word + word-break: normal 利用自然分隔符断行，再配 max-width 和 white-space: normal 确保生效。
内容溢出时文字不断行怎么办：用 word-break 和 overflow 配合
长英文、URL 或连续无空格中文（比如一串不带标点的身份证号）会直接撑开容器，overflow: hidden 只能切掉，不能换行。真正要“让内容在盒子里断开”，得靠 word-break 控制断点规则，再配合 overflow 处理多余部分。
常见错误是只加 overflow: hidden，结果文字跑出边框还看不见；或者只设 word-break: break-all，但没限制容器宽度或高度，导致视觉上还是“溢出”。
-
word-break: break-all：强制在任意字符间断行（适合 URL、日志、token 等纯文本），但对中文阅读体验差（可能把“苹果”断成“苹”和“果”） -
word-break: keep-all：中文/日文/韩文不换行，只在空格或标点处断（默认值，对中文友好，但对长英文无效） -
overflow: hidden必须搭配white-space: normal（默认值）才生效；如果误设了white-space: nowrap，断行就完全失效
固定宽度容器里显示长 URL 怎么写最稳妥
这是最典型场景：卡片里放一个
关键不是“能不能折”，而是“在哪折”。URL 有自然语义分隔（/、.、-），优先利用这些位置，而不是硬切字母。
- 用
word-break: break-word（已废弃，但浏览器仍支持）不如用标准的overflow-wrap: break-word - 更推荐组合：
overflow-wrap: break-word; word-break: normal;—— 先尝试在空格/斜杠处断，不行再退到字母级 - 务必加上
max-width: 100%或具体像素值，否则overflow-wrap不触发
overflow: hidden 没生效？先检查这三件事
写了 overflow: hidden 却依然看到内容伸出边框，90% 是以下某个条件没满足：
- 父容器没有设定
width或max-width（比如用了display: inline-block且未限宽） - 子元素用了
white-space: nowrap或display: inline且内容超长（inline 元素无视overflow） - 盒子本身是
position: absolute且未设置left/right边界，导致脱离文档流后overflow失效
验证方法：临时加个 border: 1px solid red，看边框是否真的包住了内容区域——很多时候你以为的“盒子”，其实只是视觉错觉。
中英文混排时 word-break 的兼容性坑
Chrome 和 Firefox 对 word-break: break-all 处理一致，但 Safari 在某些版本（如 iOS 15.4）下对中英文交界处断行逻辑异常：可能把“test测试”断成“test测”+“试”，而非更合理的 “test”+“测试”。
这不是 bug，是规范里没明确定义混合语种的断点优先级。所以生产环境建议：
- 中文为主场景：用
word-break: keep-all; overflow-wrap: break-word; - 需要强控断点（如日志面板）：加
hyphens: auto（需配合lang="zh"属性）并测试 Safari 表现 - 避免依赖
word-break: break-all做 UI 布局，它本质是兜底策略，不是设计手段
真正难的不是写哪几行 CSS，而是判断这个字段用户到底会贴什么内容——是人工输入的地址，还是后端吐出的 base64 字符串。不同来源，断行策略就得换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
