组合 word-wrap: break-word;和空白：pre；

Question

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

Answer 1

根据MDN doc page，这是white-space 属性的期望行为：

预

保留空白序列。仅在源中的换行符和 br> 元素处换行。

预包装

保留空白序列。在换行符处、br>处以及根据需要填充行框时会换行。

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