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 is the founder of Bootstrap Creative, a digital marketing consultancy that helps Michigan manufacturers generate qualified leads through HubSpot, technical SEO, and Google Ads. With over a decade of hands-on experience, he acts as a direct partner for B2B companies seeking measurable ROI from their marketing investment.



Related posts

Tags:

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter