仅用 css 即可让长字符串在单词内部自动换行，同时保留空格处不折行，适用于 basic auth 密钥等需保持语义分隔但又需响应式显示的场景。

仅用 css 即可让长字符串在单词内部自动换行，同时保留空格处不折行，适用于 basic auth 密钥等需保持语义分隔但又需响应式显示的场景。

在处理类似 Base64 编码的长认证令牌（如 Basic SWtTQk5zNThZM1...）时，我们常面临一个典型排版矛盾：既要避免整段文本溢出容器（需换行），又不能在空格处断行（否则破坏 "Basic " 与后续密钥的逻辑分组），更不能依赖 HTML 实体（如  ）侵入内容结构。

此时，word-break: break-all 是最直接、兼容性良好且语义准确的解决方案。它强制浏览器在任意字符间（包括字母、数字之间）进行换行，但严格尊重空格作为不可断行点——即空格前后的内容始终保留在同一行，而超长连续无空格字符串则被智能截断。

✅ 正确用法示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.click_to_copy {
  word-break: break-all;
  /* 可选：增强可读性 */
  overflow-wrap: anywhere; /* 辅助处理极窄容器下的换行倾向 */
  white-space: normal;     /* 确保不意外启用 pre 类行为 */
}

<div class="click_to_copy">
  Basic SWtTQk5zNThZM1EbERCcUlTQUQ5clET1dPU3VORHFzT1kQnNheWFMR25CVncVDQyYkp1c0dkVTQMUJnc0xnV1ZEN3MTGYvNmVyOEJiMmMMkkrQ1hEWkFaZjAL0hjMnZxbWpuNHcNzVGWG9MbFF6Z28RkNZbC9wdmo0TUEenNXSGpjRVkzZ00aG9wYURMZElvR0Ua1FPajhZb0hKSk0cm51RjZHQVRub2sS1JNOE5VUStUSlUVVIxcCtzUkxjSncY
</div>

⚠️ 注意事项：

• ❌ 避免混用 white-space: nowrap 或 pre-line —— 它们会覆盖 word-break 行为；
• ❌ 不推荐 overflow-wrap: break-word 单独使用：它仅在“无其他换行机会”时才断单词，对纯字母数字串效果不稳定；
• ✅ word-break: break-all 在 Chrome/Firefox/Safari/Edge（含旧版 IE11）中均原生支持，无需前缀；
• ? 若需更精细控制（如仅对 Base64 段启用断行），可结合 ::first-line 或包裹 ，但本场景纯 CSS 已足够。

总结：面对“不断空格、只断长词”的需求，word-break: break-all 是语义清晰、零侵入、高兼容的标准解法——它不修改 HTML 结构，不依赖 JS，也不牺牲可复制性，完美契合安全令牌等关键文本的展示与交互要求。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！