Firefox 中断词的解决方法

Question

我使用样式 white-space: pre 和 word-wrap: break-word 的组合来允许在文本区域中的任何位置进行软换行，而不管单词边界。

textarea { font-family: monospace; white-space: pre; word-wrap: break-word; }

<textarea cols="40" rows="10">
(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)
</textarea>

这就是我想要的，以及我在除 Firefox 之外的所有浏览器中得到的。

这是 Firefox 呈现的内容：显然，word-wrap 样式被忽略了。

最后，让我看看如果white-space: pre 被删除会发生什么。请注意仅在括号后换行。在这种情况下，word-wrap: break-word 完全没有区别。我也不想要这个。

所以我的问题是，如何说服 Firefox 像第一张图片一样在文本区域中格式化我的示例用户输入，允许在任何字符后进行软换行？

Answer 1

你需要使用word-break: break-all;和white-space: pre-line;

textarea {
  font-family: monospace;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
}

<textarea cols="41" rows="10">(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)</textarea>