* { hyphens: auto; }
How do I force browsers to only soft-hyphenate words that are too long to fit on the screen and words that are very long and leave large gaps when completely wrapped?
The current behavior is just not smart (browsers insert hyphens at the end of every line (basically hyphenates everything all the time)).
EDIT: Is there a way to set a minimum word size for auto-hyphenation as a percent of the container width? For example, I only want words longer than 50% of the line length to be eligible for hyphenation.
The thing with automated hyphenation is that the browser will add the hyphen anywhere in the word, and might not look as professional.
You can use
­
for these.Example:
The browser will not apply multiple hyphens if not necessary.