Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height

Question

I made an image for this question to make it easier to understand.

Is it possible to create an ellipsis on a

with a fixed width and multiple

Answer 1

I have a solution which works well but instead an ellipsis it uses a gradient. The advantages are that you don't have to do any JavaScript calculations and it works for variable width containers including table cells. It uses a couple of extra divs, but it's very easy to implement.

http://salzerdesign.com/blog/?p=453

Edit: Sorry, I did't know that the link wasn't enough. The solution is to put a div around the text, and style the div to control the overflow. Inside the div put another div with a "fade" gradient which can be made by using CSS or an image (for old IE). The gradient goes from transparent to the background color of the table cell and is a bit wider than an ellipsis. If the text is long and overflows, it goes under the "fade" div and looks "faded out". If the text is short, the fade is invisible so there is no problem. The two containers can be adjusted to let one or multiple lines show by setting the height of the container as a multiple of the text line height. The "fade" div can be positioned to only cover the last line.