CODEWITHSUNDEEP
word-breakcss-hyphens
Yulliah
Yulliah

Reputation: 26

Is there no proper breaking of words with hypens available?

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 &shy 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.'

Upvotes: 0

Views: 15

Answers (0)

Related Questions