text-wrap: balance conflicting with overflow-wrap: break-word
Recently started using text-wrap balance which works great 95% of the time but there are instances where words will randomly break, despite having enough space to be displayed. I'll attach two images.
This happened in Chrome Canary but now the CSS is available in Prod Chrome and it's still doing the same.
I read that the CSS white-space property conflicts with text-wrap but I haven't read or seen anything about overflow-wrap conflicting with balance.
The reason I have overflow-wrap is because there can be instances where pages are created in English and then go off for translations, sometimes the translations containing particularly long words. Although we try to include ­, sometimes it's just not feasible and I'd rather the word broken than it break the layout and sometimes hide the excess of the word.
If I turn off balancing and keep overflow-wrap, the text is displayed correctly.
If I turn off overflow-wrap and keep balancing, the text is displayed correctly.
If I turn off both, the text is displayed correctly.
But with both on, sometimes I see this needless breaking of the words.
I think unless there is some understanding of why it's doing this, or whether I just need to report it as a bug, the only options I can see is to turn off balancing which is a big shame
This happened in Chrome Canary but now the CSS is available in Prod Chrome and it's still doing the same.
I read that the CSS white-space property conflicts with text-wrap but I haven't read or seen anything about overflow-wrap conflicting with balance.
The reason I have overflow-wrap is because there can be instances where pages are created in English and then go off for translations, sometimes the translations containing particularly long words. Although we try to include ­, sometimes it's just not feasible and I'd rather the word broken than it break the layout and sometimes hide the excess of the word.
If I turn off balancing and keep overflow-wrap, the text is displayed correctly.
If I turn off overflow-wrap and keep balancing, the text is displayed correctly.
If I turn off both, the text is displayed correctly.
But with both on, sometimes I see this needless breaking of the words.
I think unless there is some understanding of why it's doing this, or whether I just need to report it as a bug, the only options I can see is to turn off balancing which is a big shame
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
