Javascript + CSS에서 여러 줄 텍스트 생략

실현하고 싶은 것

jQuery를 사용하지 않고 여러 줄 텍스트 끝에 "..."를 붙이고 싶습니다.
자주 있는 처리인데 잊기 쉽기 때문에 비망록.

TL;DR

htps : // p ぁ y 여기. 이오/484998

참고

클래스메소드 씨의 기사를 바탕으로 Vanilla JS로 다시 작성했습니다.
클래스 메소드 씨, 항상 감사합니다.
htps : // v.ぁsss d. jp / ria / st rin g-p ぁse-c s-an d-j 쿠 ry /

코드

index.html

<div class="wrap">
  <p class="ellipsis">
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
    うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。
  </p>
</div>

ellipsis.css

.ellipsis {
  width: 296px;
  height: 48px;
  font-size: 16px;
  overflow: hidden;
}

ellipsis.js

const target = document.getElementsByClassName("ellipsis")[0];
let text = target.innerHTML;

const clone = target.cloneNode(true);
clone.style.visibility  = "hidden";
clone.style.position    = "absolute";
clone.style.overflow    = "visible";
clone.style.width       = `${target.clientWidth}px`;
clone.style.height      = "auto";

target.insertAdjacentElement("afterend", clone);

while((text.length > 0) && (clone.clientHeight > target.clientHeight)) {
  text = text.substr(0, text.length - 1);
  clone.innerHTML = `${text}...`;
}

target.innerHTML = clone.innerHTML;
clone.parentNode.removeChild(clone);

해설

▶︎ 아무것도 하지 않은 상태

ellipsis.css

.ellipsis {
  width: 296px;
  font-size: 16px;
}

▶︎ 높이를 height: 48px;로 지정하고 요소에서 튀어나온 텍스트를 overflow: hidden;로 숨기기

ellipsis.css

.ellipsis {
  width: 296px;
  height: 48px;
  font-size: 16px;
  overflow: hidden;
}

▶︎JS 처리 추가
텍스트의 <p> 요소를 복제해, 직후에 추가

ellipsis.js

const target = document.getElementsByClassName("ellipsis")[0];
let text = target.innerHTML;

const clone = target.cloneNode(true);
clone.style.visibility  = "hidden"; // display: "none"だとclientHeightが取得できない
clone.style.position    = "absolute";
clone.style.overflow    = "visible";
clone.style.width       = `${target.clientWidth}px`;
clone.style.height      = "auto";

target.insertAdjacentElement("afterend", clone);

▶︎ 복제된 요소를 추가한 상태


▶︎ 복제된 요소의 height가 원래 요소의 height 아래로 떨어질 때까지 문자를 줄입니다.

ellipsis.js

while((text.length > 0) && (clone.clientHeight > target.clientHeight)) {
  text = text.substr(0, text.length - 1);
  clone.innerHTML = `${text}...`;
}

▶︎복제한 요소의 텍스트를 원래의 요소에 대입, 복제 요소는 불필요하므로 삭제

ellipsis.js

target.innerHTML = clone.innerHTML;
clone.parentNode.removeChild(clone);

복제 요소도 제대로 제거되었습니다