How to use CSS text-overflow on text that's wrapping?

Question

Does anybody know of a way to use {text-overflow: ellipsis;} on a piece of text that's wrapping to a second line?

Adding:

{whitespace: nowrap;}

makes text-overflow work, but I need the text to wrap so I really can't use that.

Answer 1

If you know the content is going to wrap to two lines every time this solution will work. Use ::after and content: '...'; and then position it over the bottom right corner of your type (which should be a block level element). This will only work if you are working against a solid background color as you need to set the background of the ::after to match.

The only downfall is the limited parameters this can be successful in and the fact that it will cut a character in half if things don't line up right (which they probably won't).

Answer 2

I am fairly sure that what you are trying to do is impossible in a pure CSS solution. However there is a way of hacking together a similar result. Here is what I did:

http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication

See the fade on the block of text introducing each course? That was done by firstly restricting the overflow in the usual way and then placing another div over the top of the last line and implementing the fade in CSS. Instead of a fade you could also insert an ellipsis or some other visual clue.

So, not exactly solving it the way you want, but achieving a similar UI result to ensure the user is aware that content is truncated. Personally I think it is quite pretty :-)