Can you hyphenate only overflowing words with CSS?
There's a gap in the current CSS text module draft specifications: the ability to hyphenate only words that overflow their container.
The CSS property hyphens got a boost in support with the release of Safari 9.1 earlier this year, though it still requires the -webkit prefix.
A common use case is for headings with long words that extend beyond their container, or even regular paragraph text in languages with long compound words.
Setting the property to auto hyphenates every word that crosses the end of the container width, in a way that conforms with the language dictionary.
Herein lies the problem: what if you only want to hyphenate words that are too long for the container? You can't.
The newest draft specification for the CSS text module provides no remedy for this situation.
You either get hyphens all over the place, or not at all.
There's a related overflow-wrap property, but the CSS text module level 3 specifically states that hyphenation will not be used when using the break-word value.
If you need to ensure that only long words don't peek outside their container, you have no good options: Either you're breaking the word across lines with no hyphenation, or you're hyphenating every word that hits the container edge regardless of length.
I propose that an additional value is added to either hyphens or overflow-wrap, allowing for hyphenation only to occur for words that are too long to fit in their container, leaving all other words to flow normally.
Either of these examples should do the trick:
overflow-wrap: hyphenate-word;
hyphens: overflow;Since browsers that don't support hyphens rely on the overflow-wrap property to break the words across lines, adding this feature to that property may be a deal-breaker. Adding it to the hyphens property might therefore make more sense.
May the CSS overlords discuss and consider the issue and find a solution!
P. S. I've created an issue on GitHub to discuss the matter further.