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

To expand on @DanMan's solution: in the case where variable-width fonts are used, you could use an average font width. This has two problems: 1) a text with too many W's would overflow and 2) a text with too many I's would be truncated earlier.

Or you could take a worst-case approach and use the width of the letter "W" (which I believe is the widest). This removes problem 1 above but intensifies problem 2.

A different approach could be: leave overflow: clip in the div and add an ellipsis section (maybe another div or image) with float: right; position: relative; bottom: 0px; (untested). The trick is to make the image appear above the end of text.

You could also only display the image when you know it's going to overflow (say, after about 100 characters)