user1227914 user1227914 - 1 year ago 102
CSS Question

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

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: nowrap;

Then the dotted line shows correctly but it gets cut off on one line. When I do just the:

text-overflow: ellipsis;

Then it correctly shows the 2 lines but there's no "..." at the end. How do I achieve this so it correctly uses both lines AND finishes with "..." on the second line?

Answer Source

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

<div class="container">

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.


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

Should work in all modern browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download