CSS word ellipsis ('…') after one or two lines

Question

I\'m trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as \"asdasfljashglajksgkjasghk

Answer 1

After fiddling around with the CSS to come up with a "next-best" CSS ONLY solution, I came up with this:

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

This would always assume you have at least 3 lines of text, and there are a couple of issues with it. If the last word to wrap onto line 4 is very long, there would be an unusually large blank space between the last word and the ellipsis. Similarly, it could overlap the last word if it was something very, very small, like "a".

You could add another container and have the ellipsis outside of the p, and with a bit of comment tweaking I'm sure someone will fiddle up something better.