HTML markup tip for avoiding Hanging Words
A core foundation of the web is text. Text is information, and the internet is essentially the largest source of information available.
With responsive web design being a basic tenet of proper web development, we have to pay attention to how text wraps at all of our breakpoints. Hanging words, also called widows, are both unattractive and considered to decrease legibility. Here’s a favorite solution of mine to preventing hanging words.
I used to wrap the last 2 (or 3 words) in a <span style=display:inline-block></span>. Personally I think this is kind of messy. Sure, we could make a utility class of .display-inline-block and use that within the <span>, but it would only increases our CSS.
Instead, I now prefer to insert , rather than a standard space, between whichever words I want to keep grouped at all breakpoints.
Example:
<p>…grouped at all breakpoints.</p>
Related Post
If you’re looking for a new or refreshed website, contact me today and let’s get started.
One thought on “HTML markup tip for avoiding Hanging Words”