javascript - How to add ellipsis after two lines? -

can add ellipsis after 2 lines of text? able add ellipsis in 1 line, if text large want display text on 2 lines. if text bigger want show ellipsis after second line.

here code:

.columnfontfamily{   white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; } 

it different because , in second line.any update regarding ?

following these references,

1. window.getcomputedstyle(...)
2. element.clientheight instead of element.getboundingclientrect()
3. line-height
4. box-sizing
5. text-overflow (please, check browser support)

the solution

i provide method, given element have flat text (i means nothing challenge our calculations)

<style>     div /** dont' fail note i've remove white-space property **/     {         border: 1px black dotted; /** see borders **/         box-sizing: content-box; /** important, see doc or have fetch , convert padding-top , padding-bottom in `new height` calculations **/         text-overflow: ellipsis;         overflow: hidden;         width: 220px;     } </style> <div>     mollit sint adipisicing ipsum mollit duis dolor consectetur ullamco magna esse.     tempor voluptate qui pariatur anim occaecat sunt laborum sunt dolore id.     aliquip excepteur aute nulla duis eu cillum.     lorem ad aute aliquip cillum.     lorem ea dolore laboris pariatur adipisicing duis eiusmod labore elit lorem incididunt consectetur consequat. </div> <script>     +function()     {         'use strict';         var element = document.queryselector('div');         var style = element.ownerdocument.defaultview.getcomputedstyle(element); // why using `element.ownerdocument.defaultview` because element may come different window, iframe         var lineheight = parseint(style.lineheight.replace(/[a-z]+$/)); // have said /px$/ doc mdn says nothing standard units          // here magic         var number_of_lines_to_show = 2;         element.style.height = (number_of_lines_to_show * lineheight) + "px"; // or unit in use browser     }(); </script> 

(during these tests, updated firefox 45.0.2 firefox 46) , restarted browser... among extensions not working, seem text-overflow isn't too