Increasing browser font size causes longer words to break into multiple lines

[jasonmarlowe]

My website looks great as is. However, when a user visits the site (typically on their phone) and they have the font size increased above default, it screws up most of my page titles. It’s typically the h2 and h3 tags, but it breaks up words like “INSURANCE” to: “INSURAN” on line 1 and “CE” on line 2. Is there a CSS trick I can use to stop this from happening?

[trentie92]

I feel your best option would be to tinker with the word-break property of css. You can set:

 word-break: keep-all; 

This may help you to keep certain text from breaking awkwardly. If this is a further site wide issue also check with your white-spacing.

[jasonmarlowe]

Looks like that did the trick! Tested a few pages so far and it’s working.

[Author]

Posts