Multiple Line Overflow

Question

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

<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. I need the overflow text to be hidden, but an ellipsis ("...") is displayed at the end of the valid text. The problem with using the text-overflow property is that it only works for world-wrap: none; - for only one line of text.

Answer 1

I have not tested, but would have thought 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; } 

Answer 2

I developed a library that handles multi-line text overflow

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