Is there a way to set word-breaks at suffixes and prefixes?

Issue

Is there a way to tell the html or css to word-break a word not by individual letters but rather by suffixes and prefixes?

By setting a negative word-spacing: -#px i can acomplish the look of a single word that breaks where I want. The downside is that unless it is a monospace font I have to manually calculate how much word-spacing: I should remove. Also I don't know if that method negatively affects screen readers since it would not read it as a single word but rather as two or more.

Solution

Assuming you control the HTML output, you can insert soft hyphens (­) in the correct places (after prefixes, before suffixes). Soft hyphens allow a word to break up in the specified place, and will show an otherwise invisible hyphen or dash when it does. There is no way to have a browser do this automatically; you need to specify where to place soft hyphens, either manually or by running the text through some scripting or programming language.

Answered By - Duroth