CODEWITHSUNDEEP
javascriptcssoverflowellipsis
Gustė
Gustė

Reputation: 137

Remove the rest of the innerHTML text after ellipsis

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>

Upvotes: 0

Views: 55

Answers (1)

A Haworth
A Haworth

Reputation: 36573

Couple of things:

You need -webkit-box-orient for some browsers.

The browser needs some indication of the actual height, not just the max height, so this snippet includes height: fit-content.

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;
  -webkit-box-orient: vertical;
  white-space: unset;
  -webkit-line-clamp: 3;
  padding-top: 0px;
  height: fit-content;
}
<div id='header-inner'></div>

Upvotes: 3

Related Questions