Have you ever finished a post (or page) and then been disappointed with how the page title breaks when viewed on your computer? Such as, when one word is hanging out all by itself on its own line? (That lonely word is called an “orphan” in old-fashioned proofreader-speak.) See example to the right:
One approach I used to use was to insert a “break” code (<br>) code into the title at your desired break point. And, it would look nice on my big-screen development computer – see second image on the right. However, I realized there’s a problem with this approach.
With today’s mobile devices, there is no guarantee that this break will look good on all devices. Here’s why: as the screen width gets smaller, and the headline rearranges itself accordingly, that break code will be honored even when it’s not needed, creating some awkward splits that look worse on those screen widths than if I hadn’t tried to mess with it. Such as these examples:
So here’s a better way. In this case, I “glued” the last three words of the headline together using non-breaking space characters ( ) instead of normal spaces – pasted directly into the title of the post. See image below:
After saving this, I refreshed my page and voila! A nicely breaking headline at various screen widths:
And I’ve even used this approach on the title of this very post! Squish your browser screen to narrow to watch how it behaves. The phrase “with Non-Breaking Spaces” is glued together and thus looks nice on all these narrower device screens, where the word Spaces might have ended up as a sad little orphan. Now it will always be grouped with its buddies!
PS: Advanced hint: I discovered it WILL break at the hyphen in the Non-Breaking Spaces title. Therefore, I had to substitute an extra-special HTML code for a non-breaking space instead of the normal hyphen:
‑
And, now, finally, it does work perfectly!
Leave a Reply