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

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