仅用CSS实现长词换行但不拆分空格，无需 等HTML符号？

直接使用以下CSS组合即可满足需求，无需修改HTML替换空格：

.click_to_copy {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

属性说明 #

• white-space: pre-wrap：保留文本中的原始空格，同时允许内容在容器宽度限制下自动换行，但不会在空格位置强制换行，完美保留空格的完整性。
• overflow-wrap: break-word：当单个长单词（比如示例中的密钥字符串）超出容器宽度时，会在单词内部自动拆分换行，避免内容溢出容器。

示例代码 #

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

效果验证 #

• 符合期望输出：长密钥字符串会根据容器宽度自动拆分换行，"Basic"与密钥之间的空格保留且不会在此处换行。
• 复制兼容性：文本中的空格是原生空格，复制到剪贴板时会正常保留，不会变成 这类特殊字符，完全满足Basic auth密钥的复制需求。

为什么之前的属性组合不行 #

• white-space: nowrap：强制所有内容不换行，导致长文本溢出容器。
• white-space: pre-line：会合并连续空格，且可能在空格位置换行，破坏空格的完整性。
• word-break: break-all：会在任意字符处强制换行，可能导致短单词被不必要拆分，且无法保证空格不被拆分换行。
• overflow-wrap: anywhere：功能与break-word类似，但break-word在现代浏览器中的兼容性更稳定，配合pre-wrap的组合逻辑更贴合需求。

内容的提问来源于stack exchange，提问作者Jambu Atchison