Firefox中断词的解决方法

Question

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

 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>