Latest content
-
-
-
-
-
-
-
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 thenone
keyword on those text paragraphs caused the bug to disappear.Upon further inspection I checked out the docs for the
hyphens
property. For thenone
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 ofhyphens
):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 ofnone
can cause browsers to create weird text flows.Again what learned, as we like to say in Germany!
-
-
-