112

For readability, when a title spans on multiple lines, please split it on words, not on letters.

Otherwise we get this undesirable behavior:

enter image description here

(illustration taken from Web Storm identifier expected error when I use brace to pass vue function parameters)

To solve it, you may remove this from Stack Overflow CSS:

word-break: break-all !important;

enter image description here

19
  • 44
    Remove it? But... it's !important.
    – ivarni
    Commented Nov 22, 2018 at 5:59
  • 105
    I never really understood "!important". I always read it as "not important".
    – user4639281
    Commented Nov 22, 2018 at 6:11
  • 6
    break-word !important should work fine.
    – codemirror
    Commented Nov 22, 2018 at 6:25
  • 11
  • 16
    Butthenwhatifatitleistypedlikethisandtheheaderextendsoverthespacethatitcanhaveforthequestion?
    – Jesse
    Commented Nov 22, 2018 at 7:54
  • 17
    @JessedeBruijne, if you see that: downvote, close as "unclear", and delete with prejudice... ... Er, I mean edit it or something. Commented Nov 22, 2018 at 8:10
  • 21
    They should not remove the word-break: break-all !important; from that CSS entry (that entry will be re-used anywhere SE wants a break-all). SE has gone retro and moved to using classes to assign individual CSS properties, basically using CSS classes as if they were style entries on each element. So, the thing that would need to be removed is the wb-break-all class from the <h1 itemprop="name" class="grid--cell fs-headline1 fl1 wb-break-all"> element.
    – Makyen Mod
    Commented Nov 22, 2018 at 8:32
  • 1
    for sure related to this bug I made : meta.stackoverflow.com/questions/375101/… ... they fix the title issue and now created another one Commented Nov 22, 2018 at 8:47
  • 2
    @codemirror it's not supported on Firefix: developer.mozilla.org/en-US/docs/Web/CSS/… Commented Nov 22, 2018 at 8:49
  • 1
    @Makyen You're probably correct about removing this specific class from the name/headline. But I would be surprised to find legitimate cases for a word-break: break-all instead of using overflow-wrap: break-word;
    – Cœur
    Commented Nov 22, 2018 at 10:17
  • 1
    @Cœur some non-latin languages readers actually prefer to see their words cut in the middle rather than having weird spaces between words or at the end of the line. I personally don't like it, but I discovered it is the standard for instance here were I emigrated... (Though for titles it's still just very weird IMO)
    – Kaiido
    Commented Nov 23, 2018 at 4:50
  • 1
    Maybe Enable hyphenation?
    – dualed
    Commented Nov 23, 2018 at 12:02
  • 2
    @dualed I wouldn't be surprised if hyphenation will not be implemented. Loading a hyphenation dictionary each page load sounds like a lot, as well as programming terms (function/variable names especially) not being included in that. Breaking on spaces sounds a lot easier.
    – Adriaan
    Commented Nov 23, 2018 at 14:50
  • 2
    I'm almost certain this didn't used to be the case; I've never noticed it before and I'm sure it would've been complained about before now. Any idea when this changed?
    – Mark Amery
    Commented Nov 23, 2018 at 15:09
  • 1
    Just curious—do the down-voters prefer line-wrapping to break up words? Commented Nov 24, 2018 at 2:11

2 Answers 2

7

This should be fixed in the next build. Thanks for reporting!

1
30

The proper solution to this, noted at https://stackoverflow.com/a/18628052/1709587, is not to simply remove word-break: break-all but rather to replace it with overflow-wrap: break-word, whose behaviour, per MDN is:

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

This will cause browsers to wrap at word breaks where possible, but will prevent titlesdeliberatelycraftedtocontainsingleverylongwordswithnospaceslikethisobnoxiousfuckerimcreatingherethatiswiderthanthepost from breaking the site's layout. Indeed, I'd think that word-break: break-all probably shouldn't be used anywhere in Stack Exchange's codebase, and would suggest that they audit the codebase for any occurrence of it and replace each of them with overflow-wrap: break-word unless there's some really good reason not to.

They still get this right within post bodies, as I've demonstrated above, so I'm not sure how they managed to break it in titles.

6
  • 3
    If you could put that long title in CamelCase, that would make it a bit easier to parse.
    – Will
    Commented Nov 23, 2018 at 22:14
  • Tried testing break-word in the formatting sandbox on meta, but it didn't work. Ended up looking up the docs. Firefox doesn't support it. That is word-break: break-word. The one you linked is for overflow-wrap: break-word;. Commented Nov 24, 2018 at 13:00
  • @Zoe Darn it, you're right. I got confused by the overflow-wrap vs word-wrap vs word-break distinction. I'll update my answer.
    – Mark Amery
    Commented Nov 24, 2018 at 13:06
  • I couldn't get overflow-wrap: break-word to break anything. Might be some horrible setup on my end though Commented Nov 24, 2018 at 13:12
  • @Zoe Hmm... it definitely works for me. Try inspecting the post div, in Firefox or Chrome, and toggling off the word-wrap: break-word there (note that word-wrap and overflow-wrap are synonyms) and you'll see the long word in my post suddenly reach out to overlap with the Hot Network Questions.
    – Mark Amery
    Commented Nov 24, 2018 at 13:19
  • Probably a local problem then ^^" The JSFiddle in the SO question you linked works, so it's a setup problem. word-wrap/overflow-wrap should work. Commented Nov 24, 2018 at 13:22

You must log in to answer this question.

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