Reduzir tamanho de letra mediante largura disponível

Demonstração de tentativa de redução do tamanho da letra mediante a largura disponível.

HTML

<div id="wrap" class="clearfix">
    <div>
        <span>O meu texto</span>
    </div>
    <div>
        <span>O meu texto maior</span>
    </div>
    <div>
        <span>O meu texto ainda maior</span>
    </div>
</div>

CSS

#wrap{
    margin:10px auto;
    width:50%;
    border:1px solid #d9d9d9;
    background-color:#f2f2f2;
}
#wrap > div{
    width:29%;
    float:left;
    margin:2%;
    padding:50px 0;
    background-color:#fff;
    text-align:center;
}
#wrap span{
    display:block;
    font-size:14px;
    height:20px;
    width:100%;
    line-height:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family:sans-serif;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
}

JavaScript

;(function ($) {

    $.fn.fitWidth = function( options ) {

        var opts = $.extend({
            min: "11"
        }, options );
        
        this.each(function() {
            
            var $this = $(this);
            var tamanho = parseInt($this.css('font-size'));
    
            var overflow = $this[0].scrollWidth > $this.width() ? true : false;
            while (overflow && tamanho > opts.min && tamanho-- > 1) {
                $this.css({
                    'font-size': tamanho
                });
                overflow = $this[0].scrollWidth > $this.width() ? true : false;
            }
            
        });
        return this;
        
    };
}( jQuery ));


$('#wrap span').fitWidth({"min":'1'});