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. 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. whats the point??

    • 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. 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. 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

    • 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. I just use a & nbsp; (non-breaking space) in titles. That way I can control where it’s going to break.

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

    Another approach:

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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".