关于带有"显示更多"按钮的多行文本截断思考

<div class="box">
  <p>文本内容</p>
</div>

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="box">
  <input type="checkbox" name="toggle" id="toggle" style="display: none;">
  <p>文本内容</p>
  <label for="toggle">显示更多</label>
</div>

input[name="toggle"]:checked {
 & + p {
   -webkit-line-clamp: unset;
 }
}

<label for="toggle"></label>

label {
  &::after {
    content: "显示更多";
  }
}

input[name="toggle"]:checked {
  & ~ label {
    &::after {
      content: "收起文本";
    }
  }
}

p {
 &:truncated {
   & + label {
    display: block;
   }
 }   
}
label {
  display: none;
}

let list = document.querySelectorAll("p");
let observer = new ResizeObserver(entries => {
  entries.forEach(item => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated");
  });
});

list.forEach(p => {
  observer.observe(p);
});

p {
 &.truncated {
   & + label {
    display: block;
   }
 }   
}

entries.forEach(item => {
  //... 原来的代码
  
  observer.unobserve(item.target); // 移除监听
});

let list = document.querySelectorAll("p");

list.forEach(item => {
  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");
});