With WCAG 2.1 stating there should be the possibility to zoom text to 200% without issues, this will easily lead to a single word in a header zoomed to 200% overflowing offscreen without breaking the word.
However, it looks ridiculous when a header chooses to hyphenate a word over moving it to the next line.
Preferably, a word should only be broken when it doesn't fit on a single line completely. And preferrably, it should only be broken in a logical place. And to top it off, a word should always be hyphenated when it is broken.
None of the word-break or overflow-wrap options seem to work like this. It seems like the only way to make this work, is to manually add ­ to the HTML of the longer words. And when making a solution for a customer, it's not really feasable to make them tinker with the HTML. It needs to work straight out of the box, no tinkering required.
Am I the only person that runs into this issue? Or is there a simple solution?
EDIT: I've seen this CSS being shared in multiple topics:
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
However, the 'hyphens' reverts the word-break behavior to the standard. Meaning that if I add 'hyphens', it will break any word at the end of a line, regardless of the word being able to fit on a separate line.'