推荐使用 overflow-wrap: break-word 与 word-break: break-word 组合解决长单词撑破容器问题，前者为主力断行规则，后者兼容老版 Safari，二者共存时现代浏览器优先采用 overflow-wrap。
长单词撑破容器的典型表现
页面里一段文本里混着 https://example.com/api/v1/users/1234567890abcdef 这种长串，或者日志 ID、base64 片段，CSS 默认不折行，直接把父容器撑宽甚至溢出容器边界——滚动条出现、布局错位、移动端内容被截断。
这不是浏览器 bug，是 CSS 的默认行为：英文/数字串被视为“不可分割单元”，word-break: normal 下绝不会在中间换行。
用 word-break: break-all 强制截断
最直接的解法，适合后端返回不可控长字符串（如 token、哈希值）且语义上无需阅读完整内容的场景。
-
break-all会在任意字符间断行，包括字母与字母之间，比如把user_id拆成us-er_id（注意：下划线不算“词内”分隔，也会被切） - 对中文无效（中文本来就是单字可断），但对英文、数字、URL 效果立竿见影
- 副作用明显：可能把有意义的缩写（如
APIKey）切成APIK-ey，影响可读性 - 别和
overflow: hidden搭配用——会直接截掉末尾，不如让其换行
用 hyphens: auto 做语义化连字符换行
想保留单词完整性又避免溢出？hyphens: auto 是更优雅的选择，但限制多，容易白配置。
立即学习“前端免费学习笔记（深入）”；
- 必须配合语言声明生效：
html标签加lang="en"，或元素上设lang="en" - 只对支持断字规则的语言有效（Chrome/Firefox 支持英语、德语等；Safari 对
hyphens支持极弱，基本不生效） - 不会切 URL 或代码串——它依赖字典规则，
https://这种根本不会加连字符 - 若想强制对某段文本启用，可加
hyphens: auto+overflow-wrap: break-word双保险，但后者才是真起作用的主力
真正可靠的组合： overflow-wrap: break-word + word-break: break-word
兼容性好、行为稳定、开发者可控——这才是生产环境该用的组合，尤其面对混合内容（中英数标点）。
-
overflow-wrap: break-word（旧名word-wrap: break-word）是核心：仅当整词放不下时，才在词内断开（比如把超长 URL 折到下一行） -
word-break: break-word是 Safari 的补丁（Safari 12+ 已支持overflow-wrap，但老版本仍需它） - 两者同时写，现代浏览器以
overflow-wrap为准，老 Safari 回退到word-break - 注意：不要写
word-break: break-all和overflow-wrap一起——前者会覆盖后者逻辑，变成无差别切字
最终推荐样式：
text {
overflow-wrap: break-word;
word-break: break-word;
}
复杂点在于：不同浏览器对“词”的定义有差异，比如是否把连字符、斜杠视为自然断点。如果内容里大量含 / 或 -（如路径、版本号），可以额外加 unicode-bidi: plaintext 帮助识别断点，但这已是边缘优化了。
