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;}
         


        

Answer 1

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 :-)