像最新的 Safari 一样使用空格换行文本：pre

Question

当white-space: pre; 应用于<div>s 或<textarea>s 时，Safari 可以很好地包装文本，如下所示。

<textarea style="width:300px; white-space:pre; word-wrap:break-word;"> text. dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</textarea>

当一个单词到达文本区域的max-width 时，整个单词不会像您只使用word-wrap: break-word; 那样向下移动一行。相反，它在max-width 处拆分单词并从左下角的换行符继续。我希望能够在所有主流浏览器中复制它，但如果太麻烦的话，我会满足于只使用 Firefox 和 IE。

任何关于如何实现这一目标的想法/建议将不胜感激。

Answer 1

使用overflow-wrap or word-wrap。它们是同义词，但根据我的经验，word-wrap 适用于大多数浏览器：

textarea {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

这将插入硬中断。

Answer 2

这对我有用

white-space: normal;
word-break: break-word;