长单词撑破容器的典型表现是超长URL或Base64字符串溢出固定宽度div右边界并触发滚动条；word-break: break-all无条件断行，break-word仅在必要时断行但已废弃，应改用overflow-wrap: break-word。

长单词撑破容器的典型表现是什么

页面里一段文字里夹着一串超长 URL 或 Base64 字符串，div 宽度固定为 300px，但内容直接溢出容器右边界，滚动条出现，或者在移动端被强行缩放——这不是布局写错了，是浏览器默认不拆分连续字母/数字组成的“单词”。

word-break: break-all 和 word-break: break-word 的区别

这两个值都用来解决长单词换行，但行为不同：

• word-break: break-all：**无条件断行**，哪怕是在英文单词中间（比如 “hello” 可能被切成 “he…” + “llo”），适合纯技术内容（日志、token、哈希值）
• word-break: break-word：**仅在必要时断行**，优先尝试整词换行；只有当单个单词长度超过容器宽度时，才在任意位置切开——但它在现代 CSS 中已被废弃，实际等价于 overflow-wrap: break-word

推荐用 overflow-wrap: break-word 替代 word-break: break-word，更语义清晰且兼容性一致。

只对特定元素启用断行，避免影响正常文本

全局设置 word-break 很危险，中文段落、英文标题可能被意外截断。应该精准控制：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

立即学习“前端免费学习笔记（深入）”；

• 给含 URL 或代码片段的容器加类名，例如 <span class="inline-code">eyJhbGciOi...</span>
• CSS 写成：

  .inline-code {
    word-break: break-all;
    overflow-wrap: break-word;
  }

• 如果还要保留可复制性，加上 white-space: pre-wrap 防止空格被合并

移动端 Safari 的兼容细节

iOS 15.4 之前，word-break: break-all 在 <textarea></textarea> 或 contenteditable 元素中可能失效；若需编辑长字符串，得额外加 -webkit-hyphens: auto（虽名字叫连字符，但 Safari 会借此触发断行）。

真正容易被忽略的是：断行后如果容器高度没撑开（比如用了 display: inline），视觉上还是看不见换行效果——务必确认父级有明确的 display 行为（如 block 或 inline-block）。