white-space: pre-wrap with word-break: break-all recently became very slow in Chrome

Question

Switching to a jQuery UI tab with a <div> with lines that need to be wrapped and with the following CSS :

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

has recently become very slow in Chrome. This started happening with a Chrome update within the past 3 months or (I am currently on Chrome 49) - the same example still works very fast in both IE 11 and Firefox 44 (all tested on Windows 7)

See the following jsFiddle https://jsfiddle.net/7f7btvb6/3/ for an example.

Both Tab1 and Tab2 have both white-space: pre-wrap; and word-break: break-all; properties set. Tab1 has 20000 short rows, and is reasonably fast (only slight delay when switching to it.) Tab2 has 2000 lines, but they require wrapping, and this takes a long time to display in Chrome - about 30 seconds on my computer.

Tab3 and Tab4 have the same data as Tab2, but in Tab3 white-space is set to pre instead of pre-wrap, and in Tab4 word-break is not set, and both these tabs display reasonably fast (about 1 second on my computer.)

Is this some issue with recent versions of Chrome, or some interaction between jQuery UI and recent Chrome versions ? Or am I missing something or doing something wrong ?

Any help or suggestions would be greatly appreciated !

Edit: I updated the fiddle with Tab5 which uses word-wrap: break-word; instead of word-break: break-all; as suggested below and I also added some dashes to the sample text, to show the different wrapping behavior. Tab5 is indeed as fast as Tab3 and Tab4, but does not wrap at the end of line like Tab2 does, which is ideally what my use case prefers. But I will use this for now, as this style of wrapping is still preferable to 30+ second delays. Thanks !

Edit2: I think this is not related to jQuery or even JavaScript at all - here https://jsfiddle.net/edpq5qcy/3/ is a new jsFiddle which is simplified to just the basic usage of word-break: break-all; - running this in Chrome takes 30+ seconds with 2000 lines, while in Firefox it is <1 second. Resizing the window triggers the word-wrap recalculation, and another 30 second delay in Chrome, but nearly instant in Firefox, etc. I feel like this must be a Chrome bug of some sort.

Edit3: FYI this issue has been fixed in Canary version 52.0.2712.0 (see here) - it should hopefully make its way into stable Chrome release by end of July 2016.

Answer 1

A workaround solution: simply insert <wbr> between the letters and get rid of any kind of breaker.

The wbr element represents a line-break opportunity. - w3

Demo: jsfiddle

Example of how to implement it with Javascript in an user-generated text box:

document.getElementById("input").addEventListener("input",function () {
var stringtoarray = this.value.split("");
var output = ''
for (i = 0; i < stringtoarray.length; i++) {
output = output + stringtoarray[i] + '<wbr>'
}
document.getElementById("output").innerHTML = output;
}
)

#input{
  width: 40%;   
}
#output {
  width: 40%;
  background: lightgrey;
}

<textarea id="input" rows="4" cols="50">InputTextHereInputTextHereInputTextHereInputTextHereInputTextHereInputTextHere</textarea>
<div id="output">Output</div>

Answer 2

It goes faster with this css:

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

demo: jsfiddle.