CSS 3줄 이상일 때 더보기/간략히 버튼 보이게 하기(ellipsis)

.video__description
          p.video__description__text=video.description
          .description_moreDetails 더보기​

 

.video__description {
  font-size: 14px;
  line-height: 25px;
  padding-bottom: 50px;
  padding-left: 60px;
  border-bottom: 1px solid #e0e0e0;
}

p.video__description__text.abstracted {
  height: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

p.video__description__text.clicked {
  height: 100%;
  display: block;
  overflow: visible;
}
.description_moreDetails {
  display: none;
  cursor: pointer;
  margin-top: 10px;
}

const videoDescription = document.querySelector(".video__description__text");
const moreDetailBtn = document.querySelector(".description_moreDetails");

const handleMoreDetail = (event) => {
    videoDescription.classList.add('clicked'); //clicked 이면 간략히 라는 글씨가 나오게
    event.target.innerHTML = '간략히';
    moreDetailBtn.removeEventListener("click", handleMoreDetail);
    moreDetailBtn.addEventListener("click", handlebriefly);
}

const handlebriefly = (event) => {
    videoDescription.classList.remove('clicked');
    event.target.innerHTML = '더보기';
    moreDetailBtn.removeEventListener("click", handlebriefly);
    moreDetailBtn.addEventListener("click", handleMoreDetail);
}

if(moreDetailBtn){
    moreDetailBtn.addEventListener("click", handleMoreDetail);
}

if(videoDescription){
    if(videoDescription.offsetHeight > 74){
        videoDescription.classList.add('abstracted');
        moreDetailBtn.style.display = 'flex';
    }
}

font-size와 line-height를 고려해서 3줄이면 대략 75px 정도나오므로 그 텍스트의 offsetHeight가 그 이상이면 .abstract 클래스를 추가하게 하여 줄어들은 모습으로 보이게 하고

기본적으로 더보기 버튼은 display: none으로 해서 안보이게 했다가 offsetHeight가 일정 이상일 때 그 버튼이 보이게 하는 것이다.

더보기 버튼을 누르면 .clicked 클래스를 추가하고 height를 100%으로 변경하고 overflow를 visible로 바꾼다. 

더보기 버튼을 누르면 동시에 버튼의 innerHTML은 간략히로 바꾸고, clicked 클래스를 제거하면 된다.

 

이렇게 하면 3줄 분량이 아닐 때는 더보기 버튼이 안나오면서 모든 텍스트가 가려질게 없이 다 보이고

3줄보다 더 크면 abstract의 css로 인해서 줄어들어 보이고 더보기 버튼이 보이게 된다.