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 );

        var tamanho = parseInt(this.css('font-size'));

        if (tamanho > opts.min) {
            return this.css({
                'font-size': tamanho-1        
            });
        }
    };
}( jQuery ));


$('#wrap span').each(function(){
    var $this = $(this),
        overflow = $this[0].scrollWidth > $this.width() ? true : false;

    if (overflow) {
        var size = parseInt($this.css('font-size'));
        while (overflow && size-- > 1) {
            $this.fitWidth({"min":'1'});
            overflow = $this[0].scrollWidth > $this.width() ? true : false;
        }
    }
});