What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » jQuery » Add Non-Breaking Space on Title to Prevent Widows

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

Subscribe to The Thread

  1. Bill Brown

    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

    whats the point??

    Reply ↓
    • Matt

      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

    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 ↓
  4. Milovan Zogovic

    white-space:nowrap

    Reply ↓
  5. Francesco

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

    Reply ↓
  6. El garch Hicham

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

    Reply ↓
  7. Greg McMahan

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

    Reply ↓
  8. Gianluca

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~