结合自动换行：断字；和空白：pre；

Question

我在 HTML 页面中显示从文本文件中提取的一段文本，我希望考虑该文本文件中的换行符，因此我使用“空白：pre;”。另一方面，我想防止文本在其包含的 div 之外溢出，所以我添加了“word-wrap: break-word;” 不幸的是，这两个属性似乎不能一起工作（空格覆盖自动换行）。我怎样才能让这两个属性一起工作？

Answer 1

根据MDN 文档页面，这是该white-space属性所需的行为：

预

保留空白序列。线仅在源换行字符，并在<破BR >元素。

预包装

保留空白序列。换行符处、< br > 处以及必要时将换行符打断以填充行框。

因此，要获得您所描述的内容，您需要使用该值pre-wrap代替pre。