html - Apply text-overflow: ellipsis into a <li> after two lines -

this question has answer here:

• cross browsers mult-lines text overflow ellipsis appended within width&height fixed div? 17 answers

i have list have dynamic lengths on each list item. maximum lines of list 2. texts overflow 2 lines should ended dots. can user "white-space: nowrap;". how can specify 2 lines. suggestions 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 see my fiddle.

i used pseudo elements position ellipsis on right side of every second line. added fading gradient background since method 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%);; }