How can I do text-overflow: ellipsis on two lines?

Question

I have a container where the text may expand to two lines and it\'s 40px in height, with an 18px font size. When I do:

text-overflow: ellipsis;
white-space:          


        

Answer 1

Add a span to the container, which will hold the text:

  text...

Add this CSS:

.container {
   overflow: hidden;
   position: relative;
   background: white;   //or other color
}

.container:after {
  content: '...';       //the ellipsis
  position: absolute;   //positioned in bottom-right
  bottom: 0;            //...
  right: 0;             //...
  padding: 0 0.3em;     //give some separation from text
  background: inherit;  //same color as container
}

.container span:after {
  content: '\0000a0';   //a space
  position: absolute;   //to cover up ellipsis if needed
  width: 1000px;        //...
  z-index: 1;           //...
  background: white;    //must match container's color.  can't use inherit here.
}

Fiddle

Resize the container, and you'll see that the ellipsis displays only as necessary.

Should work in all modern browsers.