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

Browse My Free Website Guides

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


Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?
  • Tags:

    Want to Get Email Updates of New Posts? Join My Email Newsletter