(Suggestion) word-break: break-all

[fregante]

word-break: break-all and overflow-wrap: break-word seem to only be suggested across internet as a solution to non-wrapping long words/URLs, which easily break flexible layouts.

... but I couldn't find any drawbacks on having this as default across the site. It doesn't sound like it would break anything (except, well, words) so what do you think about adding it to sanitize.css on html?

[DJTB]

FYI word-break does not have a break-word value it has break-all, only word-wrap/overflow-wrap has break-word.

Word-break with break-all is probably the better option overall.

[fregante]

Corrected, thanks

[jonathantneal]

Great! Let’s do some polling! https://twitter.com/jon_neal/status/851778801377955842

[jonathantneal]

@bfred-it, still interested in this?

[fregante]

Yep!

[jonathantneal]

Going to add this as well.

[tomasz1986]

Please test this with tables because I do remember having issues related to this setting. I do not remember the details now though but I ultimately ended up reverting to the default browser behaviour.

[fregante]

Table expand to fit the content, I can see how it would change its behavior. However, how does the table behave without it? It will overflow its set width, right?

[jonathantneal]

I will add this.

[jonathantneal]

Added in v6.0.0! 🎉

[fregante]

I’m hopeful for a future where this doesn’t happen 🙂

[jonathantneal]

Yes, this change would have fixed that 😛

By the way, the change wasn’t ultimately break-all, it was break-word.

[fregante]

Yes perhaps break-word is a less aggressive default

[notiv-nt]

@jonathantneal @bfred-it take a look please.

The issue is closed but still relevant.

What about:

word-break: break-all; /* Firefox */
word-break: break-word; /* Chrome/Safari/Edge/IE9+ */

Or better solution:

Looks the same in all browsers.

word-break: break-word;
word-wrap: break-word;

It works https://jsbin.com/zinetit/edit?output

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility
https://github.com/csstools/sanitize.css/blob/master/sanitize.css#L60

Edge

Chrome/Safari/FF/IE9 (-grid / -flex)