CODEWITHSUNDEEP
javascriptcsssassoverflowellipsis
Gustė
Gustė

Reputation: 137

How to remove the rest of the text after CSS ellipsis

The text is truncated by CSS rules text-overflow: ellipsis; and overflow: hidden; 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: -1

Views: 93

Answers (1)

tacoshy
tacoshy

Reputation: 13012

From your description, I see no reason to try to solve the issue with JS. Simply solve it on CSS level by using white-space: nowrap

let ele = document.getElementById('header-inner');

ele.textContent = '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 {
  margin: 0 auto;
  width: max-content;
  max-width: 461px;
  max-height: 29px;
  min-height: 25px;
  
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div id='header-inner'></div>

Upvotes: 1

Related Questions