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>

Firefox 中断词的解决方法

Workaround for break-word in Firefox

html

javascript

css

firefox

textarea