Multi-line overflow in Sencha Touch/ExtJS

Unfortunately CSS doesn't support multi-line overflow. I stumbled upon a stackoverflow question that addressed this. I applied this to work in Sencha Touch and ExtJS.

Try it yourself on jsfiddle:
ExtJS fiddle
Original jquery fiddle

With the following HTML:

<style type="text/css">
.item { 
   width: 300px; height: 120px; overflow: hidden;
}

.item div { 
  padding: 10px; margin: 0; 
}
</style>

<div class="category-item">
   <div class="list-item-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan 
      orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed
      ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, 
      dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, 
      quis adipiscing ipsum urna ac quam.
   </div>  
</div>​

The javascript to add multi-line overflow in Sencha Touch is:

var item = Ext.select('.item div').first();
var divh = Ext.select('.item').first().getHeight();
 
while (item.getOuterHeight()>divh) {
   item.dom.innerText = item.dom.innerText.replace(/\W*\s(\S)*$/, '...');
} 

ExtJS is the same with one line changed:

var item=Ext.select('.item div').first();
var divh=Ext.select('.item').first().getHeight();

while (item.getComputedHeight()>divh) { //this line changed
    item.dom.innerText = item.dom.innerText.replace(/\W*\s(\S)*$/, '...');
}​

The above code with display the following:

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Proin nisi ligula, dapibus a
volutpat sit amet, mattis et dui. Nunc
porttitor accumsan orci id luctus. Phasellus
ipsum metus, tincidunt non rhoncus id...