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



Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Topic:

Related posts

Tags:

Want to Get Email Updates of New Articles?

Join My Email Newsletter