Issue summary is breaking within words


This repros in both IE10 and Chrome (stable) and can be seen here:

In IE, the word "Razor" is broken into "Raz" and "or" and the word "variable" is broken into "varia" and "ble." In Chrome, "variable" is broken into "va" and "riable."

file attachments

Closed Nov 28, 2012 at 8:58 PM by TomCornelius
Fixed in recent deployment


JeffHandley wrote Nov 13, 2012 at 7:18 PM

It looks like it's the use of "word-wrap:break-word." This value indicates, "Allows unbreakable words to be broken."

JeffHandley wrote Nov 13, 2012 at 7:44 PM

From playing around in Chrome's developer tools, it looks like the "word-wrap:break-word; white-space: pre" can be changed to "white-space:pre-wrap" and you'll be in pretty good shape.

I am guessing that the use of "white-space: pre" was meant to preserve code formatting within the text, but this causes standard text rendering regressions. I vote to favor standard text rendering over code formatting, but I think that "white-space:pre-wrap" will strike a good balance.