CSS 实现单词内断行但保留空格不换行的精准控制-html教程-PHP中文网

仅用 css 即可实现“在长单词内部自动断行，同时严格禁止在空格处换行”，适用于 base64、api 密钥等含空格的认证字符串展示与复制场景。

仅用 css 即可实现“在长单词内部自动断行，同时严格禁止在空格处换行”，适用于 base64、api 密钥等含空格的认证字符串展示与复制场景。

在处理如 Basic 这类需保持语义完整性（空格不可分割）但又必须响应容器宽度的认证字符串时，常见的 overflow-wrap: break-word 或 white-space: pre-line 往往失效：前者可能忽略空格约束，后者则完全禁用换行，导致溢出；而 word-break: break-all 虽常被误认为“暴力断词”，实则恰好满足本需求的核心逻辑——它允许在任意字符间断行（包括字母、数字之间），但不会主动在空格前/后插入换行点，即空格仍作为不可折行的“分隔符”保留其原始位置和渲染行为。

正确方案如下：

.click_to_copy {
  word-break: break-all;
  /* 可选：增强可读性与兼容性 */
  overflow-wrap: normal;     /* 确保不触发额外换行 */
  white-space: normal;       /* 允许自然换行逻辑生效 */
}

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

✅ 效果验证：

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

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

下载

Basic 后的空格始终保留，不会在空格处换行；
后续超长 Base64 字符串会在字母/数字间自动断行，严格适配容器宽度；
全程无需、等 HTML 干预，纯 CSS 驱动，完美支持 document.execCommand('copy') 或现代 navigator.clipboard.writeText() 的原生复制。

⚠️ 注意事项：

避免混用 word-break: break-all 与 overflow-wrap: break-word —— 后者在空格附近可能生成冗余换行点，破坏语义分隔；
不推荐 word-break: break-word（已废弃别名）或 overflow-wrap: anywhere，二者均可能在空格后换行；
在 Safari 15.4+ 和 Chrome 100+ 中行为一致；若需兼容旧版 Safari（

总结：word-break: break-all 是本场景下最简洁、标准且可靠的解决方案——它并非“无差别断行”，而是尊重空格作为分词边界，仅对连续非空白字符启用细粒度断行，兼顾可读性、可复制性与语义正确性。