0

Both for word-wrap: break-word; and overflow-wrap: break-word; CSS properties i have a premature breaking problem at the very end like in this case. Besides, with longer strings I even witnessed this problem manifest itself in different forms like not breaking at all at the expected end of the line or self inventing a wider or narrower width for the remaining of the lines.

The question is, when you have a very long string why does overflow-wrap: break-word; "break" at certain unexpected places..?

var str = Array.from({length:65366}, _ => ~~(Math.random()*9) + 1)
               .reduce((s,c) => s + c, ""),
    blk = document.getElementById("block");

blk.textContent = str;
#block{
    margin : 0 auto;
    font-family: monospace;
    width: 90vw;
    overflow-wrap: break-word;
}
<p id="block"></p>

Note: This problem doesn't seem to exist in Firefox but in Chrome and Edge i can see it. Also while scrolling down you may notice that the right margin changes.

Redu
  • 25,060
  • 6
  • 56
  • 76
  • 1
    I'm seeing the expected breaking behavior in Chrome 97 on Windows 10. Have you checked this issue with other browsers/operating systems? – D M Jan 26 '22 at 20:16
  • Actually, if I don't expand the stack snippet, I do see the very last line extend further than the rest of the lines. I still do not see an issue with premature breaking or lines being longer than the others by a character. – D M Jan 26 '22 at 20:19
  • And Firefox 92 Win 10 as well – zer00ne Jan 26 '22 at 20:19
  • @DM Have you scolled all the way down? Also please check the right margin when scrolling. I tested this with Chrome 97.0.4692.99 – Redu Jan 26 '22 at 20:20
  • @DM I checked with Firefox (96.0.1) and it seems to work fine. However with Edge (99.0.1131.3) I still see the breaking just a little different than Chrome. – Redu Jan 26 '22 at 20:27
  • 1
    can it help you ? https://stackoverflow.com/a/23777535/10749726 – Ahmad MRF Jan 26 '22 at 20:30

0 Answers0