Add Non-Breaking Space on Title to Prevent Widows

$("h2").each(function() {
         var wordArray = $(this).text().split(" ");
         var finalTitle = "";
         for (i=0;i<=wordArray.length-1;i++) {
            finalTitle += wordArray[i];
            if (i == (wordArray.length-2)) {
                finalTitle += "&nbsp;";
            } else {
                finalTitle += " ";
            }
          }
          $(this).html(finalTitle);
});

8 Responses

1. Bill Brown says:

   09/24/2009 at 4:45 am

   You can actually do that without the inner loop like this:

   
$("*").each(function(){
var content,widow;
content = $(this).text().split(" ");
widow = " "+content.pop();
$(this).html(content.join(" ")+widow);
});


   Reply
2. james says:

   06/11/2010 at 5:46 am

   whats the point??

   Reply
   • Matt says:

     08/03/2010 at 10:38 am

     James, in print typography (magazines, books, etc) it’s considered bad style to have a single word by itself on the last line of a paragraph, especially across columns, and single lines across pages. On the web it’s only started to be addressed with css.

     http://reference.sitepoint.com/css/orphans

     Reply
3. Andrea Canton says:

   06/12/2010 at 9:35 am

   if you have an <a> inside of an <h2> you should change the .text() function with the .html() funtion for take the right wordarray.

   
var wordArray = $(this).html().split(” “);


   It’s not really stable but works!

   Reply