How is the neat way to add "..." after a cropped text inside DIV?

I need to show "stub" description texts beside product images. But I need to cut it in 3 lines high if it's very long (or less, if the description is just a short text). But the problem is the field dimension for the text may vary. And other problem is I have to add "..." on the end of the stub text.

The current CSS:

.box {
    width: 100px;
    height: 50px;
    overflow:hidden;
}

The HTML:

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in egestas diam, et gravida ligula. Nullam fermentum eget purus consectetur semper. Morbi ut adipiscing purus. Sed lobortis nulla erat, pulvinar pharetra mauris porttitor sagittis. Morbi pellentesque dui quis tortor feugiat, eu malesuada dui faucibus. Integer magna nisi, cursus ac diam accumsan, hendrerit laoreet nibh. In commodo lorem massa, eget semper tellus cursus a. Proin sagittis consectetur sapien ut congue. Vivamus cursus tellus in pellentesque hendrerit. Curabitur placerat tincidunt porta. Nunc pulvinar odio at enim imperdiet vulputate.</div>

The HTML result with the current CSS:

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
Donec in egestas diam, et

The HTML result intended:

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
Donec in egestas diam, et ...

What do you think is the neat way to do this, which mean it's flexible / expandable in the future? I have HTML, CSS, JSP, Javascript, and JQuery at my disposal. But I can't, by any means, alter the data inside the database. But of course I can manipulate any data I receive from the database before I present it to the user.

Solution

You can use a nice jQuery plugin for that, see http://dotdotdot.frebsite.nl/