For years now my go-to pattern for CSS hyphenation was always something like this:
p {
/* activate hyphenation */
hyphens: auto;
/* add some sensible settings (http://clagnut.com/blog/2395/) */
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-last: always;
hyphenate-limit-lines: 2;
hyphenate-limit-zone: 8%;
}
@media screen and (min-width: 768px) {
p {
/* deactivate hyphenation for larger viewports */
hyphens: none;
}
}
Today at work we encountered a strange bug in combination with the none keyword. A floated element caused the text paragraphs besides it to create weird and random text breaks. Toggling the none keyword on those text paragraphs caused the bug to disappear.
Upon further inspection I checked out the docs for the hyphens property. For the none value the following is stated:
Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.
This seems rather aggressive. What I actually want is what the manual keyword offers (which is also the default value of hyphens):
Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. […]
Adding manual to the text paragraphs fixed the bug. Unfortunately I don’t know what exactly caused the bug, but I guess in certain layout combinations the aggressive nature of none can cause browsers to create weird text flows.
Again what learned, as we like to say in Germany!