像最新的Safari一样使用white-space：pre进行自动换行

Question

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

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

当一个单词到达textarea的max-width时，如果你只使用word-wrap: break-word;，整个单词就不会像往常一样向下移动。相反，它会在max-width分割单词并从左下角换行继续。我希望能够在所有主流浏览器中复制它，但如果它太麻烦，我会对Firefox和IE感到满意。

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

Answer 1

这对我有用

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

Answer 2

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

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

这将插入硬休息。