Multiple line text overflow

I need to trim some text not depending on its length, but on its height. I have this:

<div style="width:100px; height:100px; overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec lacus at felis malesuada hendrerit. Pellentesque et leo venenatis nulla feugiat bibendum. Ut pretium porta massa, vitae interdum nulla ultrices et. Etiam ut erat id magna interdum consequat. Curabitur ornare sodales metus quis egestas. Donec odio est, hendrerit vel vehicula ut, scelerisque ac tortor. Curabitur risus neque, viverra vitae dapibus vitae, vulputate vitae est
</div>

This code will display a square with overflowing text hidden. I need the overflowing text to be hidden, but at the end of vissible text, there would be ellipsis ("...") displayed. The problem in use of text-overflow property is, that it works only for world-wrap: none; - just for one lin开发者_开发百科e of text.

---

I haven't tested but i would think that this would work:

    <div style="width:100px; height:100px; overflow:hidden;"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec lacus at felis malesuada hendrerit. Pellentesque et leo venenatis nulla feugiat bibendum. Ut pretium porta massa, vitae interdum nulla ultrices et. Etiam ut erat id magna interdum consequat. Curabitur ornare sodales metus quis egestas. Donec odio est, hendrerit vel vehicula ut, scelerisque ac tortor. Curabitur risus neque, viverra vitae dapibus vitae, vulputate vitae est 

    <div class="ellipsis">...</div>    
    </div>

.ellipsis
{
vertical-align: text-bottom;
float: right;
}

---

I have developped a library that handle multiline text overflow

Please check http://www.samuelrossille.com/home/jstext for screenshot, tutorial, and dowload link.