解决Firefox中的破解词

Question

我使用样式white-space: pre和word-wrap: break-word的组合来允许在textarea中的任何位置进行软包装，而不管字边界。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

最后，让我展示如果删除white-space: pre会发生什么。请注意线条仅在括号后断开。在这种情况下，word-wrap: break-word完全没有任何区别。我也不想要这个。

所以我的问题是，我如何说服Firefox在第一张图片中的textarea中格式化我的示例用户输入，允许在任何字符后进行软包裹？

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>