The text is truncated by CSS rules text-overflow: ellipsis; and -webkit-line-clamp:3; but when the text is longer and goes to next row, sometimes the next row is showing few pixels. element.innerHTML doesn’t show the three dots from ellipsis, so I can’t detect it with regex and remove it.
How can I remove the remaining text from html element after ellipsis is added?
In the example the height of the div should stay the same
let ele = document.getElementById('header-inner');
ele.innerHTML = 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which ';#header-inner {
height: 80px;
display: -webkit-box;
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
border-width: 1px;
max-height: 62px;
text-overflow: ellipsis;
overflow: hidden;
-moz-box-orient: vertical;
white-space: unset;
-webkit-line-clamp: 3;
padding-top: 0px;
}<div id='header-inner'></div>