48

For sites that have the new responsive theme enabled, where the "Ask Question" button is in line with the question title on question pages, the word wrap on long titles is not working correctly. It will break a word across two lines. Here is an example from Personal Finance and Money:

Maximum width, left nav hidden: example1

Narrow width: example2

This is also happening on beta sites. Here is an example on Sports:

example3

These screenshots were all taken on Firefox, but I am seeing the same problems in Chrome and Internet Explorer.

One more example: recursive example

11

We’re breaking lines less aggressively now. This is a bugfix of a bugfix. No good deed goes unpunished 😛

  • 5
    The bug is not fixed yet. – Sonic the Anonymous WizHog Nov 26 '18 at 5:08
  • 4
    How long before we see this fixed? I've tried clearing my browser cache, but I am still seeing the problem. – Ben Miller Nov 26 '18 at 5:12
  • 5
    It'll go out in the next build, y'all. It's Sunday night after a major American holiday. – Aaron Shekey Nov 26 '18 at 5:17
  • 1
    @SonictheInclusiveHedgehog It looks fixed to me now. – Isaac Moses Nov 26 '18 at 14:27
  • @AaronShekey According to github.com/w3c/csswg-drafts/issues/2390#issuecomment-398568426, overflow-wrap: break-word will supersede word-break: break-word in the future, so I'm unsure why you didn't implement my full suggestion. :) – Cœur Nov 27 '18 at 2:08
  • 1
    @Cœur In practice, overflow-wrap: break-word wasn't working in Safari. We use atomic CSS classes, so swapping in the future for .ow-break-word will be trivial. – Aaron Shekey Nov 27 '18 at 17:37
9
+50

Suggested CSS fix for Stack Exchange webmasters:

Replace all instances of your current class (in stacks.css):

.wb-break-all {
    word-break: break-all !important;
}

With a human-friendly class:

.wb-overflow-wrap: {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

This way you'll never have overflow (that was the intent, right?) and the wrap will always be on words, not on characters.

ps: last time I did some CSS was fifteen years ago, so forgive me if my suggestion is imperfect.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .