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);
});

Turns this:
New Screencast: First Ten Minutes with TypeKit

Into this:
New Screencast: First Ten Minutes with&nbsp;TypeKit

Comments

  1. User Avatar
    Bill Brown
    Permalink to comment#

    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);
    });

  2. User Avatar
    james
    Permalink to comment#

    whats the point??

    • User Avatar
      Matt
      Permalink to comment#

      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

  3. User Avatar
    Andrea Canton
    Permalink to comment#

    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!

  4. User Avatar
    Milovan Zogovic
    Permalink to comment#

    white-space:nowrap

  5. User Avatar
    Francesco
    Permalink to comment#

    this topic is very interesting especially if applied to the new fluid layout trend

  6. User Avatar
    El garch Hicham
    Permalink to comment#

    I agree with Milovan the {white-space:nowrap} do that job

    • User Avatar
      Josh Betz
      Permalink to comment#

      That makes it so the title doesn’t wrap at all though. It’s not that the title shouldn’t wrap, but we want to make sure the wrap doesn’t happen between the last two words.

  7. User Avatar
    Greg McMahan
    Permalink to comment#

    I just use a & nbsp; (non-breaking space) in titles. That way I can control where it’s going to break.

  8. User Avatar
    Gianluca
    Permalink to comment#

    No, {white-space:nowrap} doesn’t do this job.
    If you have 3 full lines of text plus an orphan word, the nowrap property move all the text in one very loooong line.

  9. User Avatar
    Ilya
    Permalink to comment#

    Another approach:

    $("h2").html(function(i, text){ 
        return text
                   .replace(/\&nbsp;([^\s]+)$/,' $1')
                   .replace(/\s([^\s]+)\s*$/,'&nbsp;$1')
    })
    
  10. User Avatar
    kald75
    Permalink to comment#

    No, {white-space:nowrap} doesn’t do this job.
    If you have 3 full lines of text plus an orphan word, the nowrap property move all the text in one very loooong line.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag