Shrink Titles To Fit On One Line

Last modified: 
Thursday, April 9th, 2015


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;


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.

The operator of this site makes no claims, promises, or guarantees of the accuracy, completeness, originality, uniqueness, or even general adequacy of the contents herein and expressly disclaims liability for errors and omissions in the contents of this website.