How to Prevent One Word Lines (widow orphan) In Website Paragraphs


I am often adding padding to the left and right of paragraphs to force copy down to prevent one word on a line. Or even worse, I add <br> to a word on the line above to prevent the word by itself. But this causes issues with responsive design because the <br> changes position breaking the layout. The script below can help find these cases and return a word down.

Remove one word lines in paragraphs

        // removes widows from paragraphs and li      
        $('li, p').each(function(){
          var string = $.trim($(this).html());
          string = string.replace(/ ([^ ]*) ([^ ]*)$/,'&nbsp;$1&nbsp;$2');
          $(this).html(string);
        });

Source


About the Author

Jacob Lett (Jake) is the founder of Bootstrap Creative, a B2B marketing consultancy specializing in manufacturers and industrial companies. A HubSpot-certified CMS developer, SEO, Answer Engine Optimization (AEO), and RevOps professional, he helps B2B companies improve their websites, search visibility, HubSpot systems, and Google Ads campaigns to generate more qualified leads and RFQs. With over a decade of hands-on experience, he acts as a direct partner for companies seeking measurable ROI from their marketing investment.



Related posts
Category: Code Snippets

Tags:

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter