hatchshow.js

(function ($) {
  $(window).load(function(){
    $().hatchShow();
  });
  jQuery.fn.hatchShow = function(){
    $this = $(this);
    $this.css('display','inner-block').css('white-space','pre').each(function(){
      var t = $(this);
      t.wrap("<span class='hatchshow_temp' style='display:block'>");
      var pw = t.parent().width();
      var reduceText = false;
      if (t.width() > pw) {
        reduceText = true;
      }
      
      if (reduceText) {
        while( t.width() > pw ){
          t.css('font-size', (t.fontSize()-1)+"px");
        };
      }
      else {
        while( t.width() < pw ){
          t.css('font-size', (t.fontSize()+1)+"px");
        };
        
        if (t.width() > pw) {
          while( t.width() > pw ){
            t.css('font-size', (t.fontSize() - 1)+"px");
          };
        }
      }
      t.css('line-height', '1em');
    }).css('visibility','visible');
  };
  jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};
})(jQuery);

Some settingis for my needs, and a "bug fixing" that make the script going in to an infinite loop if starting width of text was larger than the target width (so i have to reduce the font)

-Added the anonymous function (function ($) ... )(jQuery) to make always possible to use $ as jQuery (i'm using in on Drupal and the default setting doesen't permitt, to keep compatibility with other js framework)

-Added a control on the start text width to understand if i have to make the font greater o smaller

-Added the possibility to call the script to specified jQuery selector