Apply text-overflow: ellipsis into a
after two lines

Question

I have a list which have dynamic lengths on each list item. The maximum lines of the list would be 2. For those texts which overflow the 2 lines should be ended with dots. can user "white-space: nowrap;". but how can i specify the 2 lines. Any suggestions are highly appreaciated.example

  li {
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    border: 2px solid #ff0000;
  }

<ul>
  <li>long long name</li>
  <li>long long name long long name</li>
  <li>long long name long long name long long name</li>
</ul>

please can you show your code. if the fidlde gets fixed/isnt avaialbe then the quetion wont help others. also can you please "The maximum lines of the list would be 2", none of the text in your example is on more then one line — atmd, Jul 15 '15 at 12:26
Try this for multi line ellipsis: http://codepen.io/martinwolf/pen/qlFdp — Pete, Jul 15 '15 at 12:30

score 0 · Answer 1 · answered Jul 15 '15 at 12:52

Please see my fiddle.

I used pseudo elements to position an ellipsis on the right side of every second line. I also added some fading gradient background since this method will not cut off whole words.

CSS

li {
    width:100px;
    max-height: 50px;
    line-height: 25px;
    border:2px solid #ff0000;
    position: relative;
    overflow: hidden;
}

li:after {
    content:"...";
    position: absolute;
    top: 25px;
    right: 0px;
    z-index: 2;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 30%, #fff 100%);;
}

Apply text-overflow: ellipsis into a after two lines

1 Answers1

Apply text-overflow: ellipsis into a
after two lines