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.
word-break: break-all !important;
from that CSS entry (that entry will be re-used anywhere SE wants abreak-all
). SE has gone retro and moved to using classes to assign individual CSS properties, basically using CSS classes as if they werestyle
entries on each element. So, the thing that would need to be removed is thewb-break-all
class from the<h1 itemprop="name" class="grid--cell fs-headline1 fl1 wb-break-all">
element.word-break: break-all
instead of usingoverflow-wrap: break-word;