空白：用断字进行预换行：最近在 Chrome 中，全部中断变得非常慢

Question

<div>切换到带有需要换行的行和以下 CSS 的jQuery UI 选项卡：

.console {
  white-space: pre-wrap;
  word-break: break-all;
}

Chrome 最近变得非常慢。这种情况是从过去 3 个月内的 Chrome 更新开始发生的，或者（我目前使用的是 Chrome 49）——同一示例在 IE 11 和 Firefox 44 中仍然运行得非常快（全部在 Windows 7 上进行了测试）

请参阅以下 jsFiddle https://jsfiddle.net/7f7btvb6/3/的示例。

Tab1 和 Tab2 都设置了white-space: pre-wrap;和word-break: break-all;属性。Tab1 有 20000 行短行，并且速度相当快（切换到它时只有轻微的延迟）。 Tab2 有 2000 行，但它们需要换行，这需要很长时间才能在 Chrome 中显示 - 在我的计算机上大约需要 30 秒。

Tab3 和 Tab4 与 Tab2 具有相同的数据，但在 Tab3 中white-space设置pre为而不是pre-wrap，而在 Tab4 中word-break未设置，并且这两个选项卡显示得相当快（在我的计算机上大约 1 秒）。

这是 Chrome 最新版本的问题，还是 jQuery UI 和 Chrome 最新版本之间的某些交互问题？或者我错过了什么或者做错了什么？

任何帮助或建议将不胜感激！

编辑：我用 Tab5 更新了小提琴，它使用word-wrap: break-word;而不是word-break: break-all;按照下面的建议，我还在示例文本中添加了一些破折号，以显示不同的换行行为。Tab5 确实与 Tab3 和 Tab4 一样快，但不像 Tab2 那样在行尾换行，这正是我的用例所喜欢的。但我现在会使用它，因为这种环绕方式仍然比 30 秒以上的延迟更可取。谢谢 ！

Edit2：我认为这与 jQuery 甚至 JavaScript 根本无关 - 这里https://jsfiddle.net/edpq5qcy/3/是一个新的 jsFiddle ，它被简化为基本用法word-break: break-all;- 在 Chrome 中运行它需要 30+ 2000 行需要 1 秒，而 Firefox 则小于 1 秒。调整窗口大小会触发自动换行重新计算，并且在 Chrome 中又会出现 30 秒的延迟，但在 Firefox 等中几乎是即时的。我觉得这一定是 Chrome 的某种错误。

Edit3：仅供参考，此问题已在 Canary 版本 52.0.2712.0 中得到修复（请参阅此处） - 它有望在 2016 年 7 月底进入稳定的 Chrome 版本。

Answer 1

使用这个 css 速度更快：

.console {
  white-space: pre-wrap;
  word-wrap: break-word;
}

演示：jsfiddle。