Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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. 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. james
    Permalink to comment#

    whats the point??

    • 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. 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. Milovan Zogovic
    Permalink to comment#

    white-space:nowrap

  5. Francesco
    Permalink to comment#

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

  6. El garch Hicham
    Permalink to comment#

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

    • 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. 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. 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. Ilya
    Permalink to comment#

    Another approach:

    $("h2").html(function(i, text){ 
        return text
                   .replace(/\&nbsp;([^\s]+)$/,' $1')
                   .replace(/\s([^\s]+)\s*$/,'&nbsp;$1')
    })
    
  10. 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```