如何实现white-space: pre与word-wrap: break-word属性同时生效？

嘿，这个坑我之前踩过！确实当你同时用white-space: pre和word-wrap: break-word时，前者会完全覆盖后者的自动换行效果——因为pre的核心特性就是完全遵循文本里的换行和空格，绝不自动换行，哪怕内容撑破容器。

不过别担心，CSS早就给我们准备了完美的替代方案：用white-space: pre-wrap代替white-space: pre！

这个属性的妙处在于：

• 完全保留原文本中的换行符（满足你保留文本文件换行的需求）
• 允许浏览器在内容超出容器宽度时自动换行，包括对过长的单词进行拆分（实现你要的防止溢出效果）

直接上代码示例：

HTML结构 #

<div class="text-content">
  <!-- 这里插入从文本文件读取的内容，包含原本的换行 -->
</div>

CSS样式 #

.text-content {
  white-space: pre-wrap; /* 核心属性 */
  overflow-wrap: break-word; /* 替代word-wrap的标准属性，确保长单词拆分 */
  width: 300px; /* 示例容器宽度，根据你的需求调整 */
  border: 1px solid #eee; /* 可选，方便观察容器边界 */
}

额外补充几个小细节：

1. overflow-wrap: break-word是word-wrap: break-word的标准别名，现在更推荐使用前者，不过两者在主流浏览器里效果一致。
2. 如果你的文本里有连续的空格，pre-wrap也会像pre一样保留它们，不会合并成单个空格。
3. 如果你还需要禁止文本被用户选中或者其他需求，可以再叠加其他CSS属性，不影响这两个核心功能。

亲测这个方案在所有现代浏览器里都能正常工作，完美兼顾保留换行和防止容器溢出的需求！

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