Shrink Titles To Fit On One Line

Overview

This is a small jquery script which will shrink text to fit on a single line. You can see it in action on this page where the long page title has been shrunk to fit on a single line.

jQuery Code

$(function () { /* Force titles on one line */
  $('#selector').each(function () {
    var fontsize = Math.round(parseFloat($(this).css('font-size')));
    var maxh = fontsize;
    shrink = true;
    while (shrink) {
      if (maxh < $(this).height()) {
        fontsize = fontsize - 2;
        $(this).css('font-size', fontsize + 'px');
      }
      else {
        shrink = false;
      }
    }
  });
});

Note

This script is intended for use with titles. If you were to use it on a large selection of text, such as body copy, it would likely loop endlessly and hang up the browser.