// ****** THE CLASS ****** //

var FitText=new Class({Implements:Options,options:{offset:10,fitClass:'truncated'},initialize:function(container,elements,options){this.setOptions(options);this.container=document.id(container);this.elements=$$(elements);this.bound=this.fit.bind(this);this.elements.each(function(element){element.store('scrollWidth',element.getSize().x).store('text',element.get('text'));}.bind(this));this.attach();this.fit();},fit:function(){contentWidth=this.container.getSize().x-this.options.offset;this.elements.each(function(element,index){var scrollWidth=element.retrieve('scrollWidth');var text=element.retrieve('text');if(scrollWidth>contentWidth){element.addClass(this.options.fitClass);var length=((text.length*(contentWidth/scrollWidth))/2).round();var truncatedText=text.substr(0,length)+'...'+text.substr(-length+6);element.set('text',truncatedText);}else if(element.hasClass(this.options.fitClass)){element.removeClass(this.options.fitClass);element.set('text',text);}}.bind(this));return this;},attach:function(){window.addEvent('resize',this.bound);return this;},detach:function(){window.removeEvent('resize',this.bound);return this;},reset:function(){this.elements.each(function(element){element.removeClass(this.options.fitClass).set('text',element.retrieve('text'));}.bind(this));return this;}});


// ****** USAGE ****** //

var fit = new FitText('container','li > span',{
  offset: 40,
  fitClass: 'highlight'
});


// ****** TEST ****** //

var resizable = $('resizable');
resizable.makeResizable({
    handle: 'handle',
    modifiers: {'x':'width', 'y':false},
    onDrag: function(){
        if(resizable.getSize().x < 200) this.stop();
        fit.fit();
    }
});


$('attachment').addEvent('click',function(){
  if(this.get('text') == 'Detach') {
    fit.detach();
    this.set('text','Attach');
  } else {
    fit.attach().fit();
    this.set('text','Detach');
  }
});

$('reset').addEvent('click',function(){
  fit.reset();
});

$('fit').addEvent('click',function(){
  fit.fit();
});

<h2>Resize the box</h2>
    
<p>The lines should:</p>
    
<ul>
    <li>Truncate with an ellipses near the middle.</li>
    <li>Receive a class (highlight) when truncated, and lose it when not</li>
</ul>

<div id="resizable">
    <ul id="container">
        <li><span>Lorem ipsum dolor</span></li>
        <li><span>sit amet, consectetur adipisicing</span></li>
        <li><span>elit, sed do eiusmod tempor incididunt ut labore et</span></li>
        <li><span>dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span></li>
        <li><span>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</span></li>
    </ul>
    <div id="handle"></div>
</div>
    
<h2>Public Methods</h2>
<div class="methods">
    <button id="attachment" class="attached">Detach</button>
    <button id="reset">Reset</button>
    <button id="fit">Fit</button>
</div>

ul#container {
    padding: 4px;
    padding-left: 2em;
    list-style: square;
}

ul#container li {
    white-space: nowrap;
    padding: 0;
    margin-bottom: 8px;
    margin-top: 8px;
    list-style: square;
}

.highlight {
    color: #e40053;
}

div#resizable {
    position: relative;
    margin: 10px;
    border: solid 5px #585858;
    background: #000;
    color: #fff;
}

div#handle {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #0094d5;
    cursor: col-resize;
    height: 16px;
    width: 16px;
}


/* @group global */

body {
    font-family: Helvetica, arial;
    background: #fff;
}

h1 {
    font-size: 2em;
    color: #0094d5;
    margin-bottom: .5em;
    margin-top: .5em;
}

h2 {
    color: #43aa38;
    font-size: 1.5em;
    margin-bottom: .5em;
    margin-top: .5em;
}

ul {
    padding-left: 2em;
    list-style: disc;
}

/* @end */

MooShell