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.
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.
If you have a fixed width and font you could add a dash to the word to break it. There is no other built in solution.
