我可以创建一个可折叠对象，在展开自身之前显示其部分内容吗?

Question

正如我在标题中所说，我需要可折叠对象在展开之前将其内容显示到某个点，然后在展开后完全显示它。以下是 2 张图纸作为示例： https://i.stack.imgur.com/f4CHh.png https://i.stack.imgur.com/wlye6.png

Answer 1

设置行号更改-webkit-line-clamp

let showbutton = document.querySelectorAll("button");
let items = document.querySelectorAll(".card");
for(let i=0; i < showbutton.length; i++) {
showbutton[i].addEventListener('click', function() {
    items[i].classList.toggle("toggle");
})
  }

container{
  display:flex;
  flex-wrap:wrap;
  width:100%;
}
container div{
  display:flex;
  justify-content:space-around;
}
.card{
  width:50%;
  height:max-content;
  border:2px solid;
  box-sizing:border-box;
  text-align:center;
}
.card span{
  text-align:left;
  margin-bottom:1em;
  overflow:hidden;
  display: -webkit-box;
  text-overflow:ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.card.toggle span{
  -webkit-line-clamp: unset;
}

<container>
  <div>
<p class="card"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum finibus dolor quis pellentesque. Phasellus tincidunt elit et tellus auctor tincidunt. Fusce luctus quam ut dolor semper, in mattis orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et lectus a nisl sodales dignissim. Suspendisse ornare eget nulla a porta. Donec at nisl eleifend, ultricies turpis rhoncus, vestibulum lacus. Proin nec erat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lacus eget consectetur finibus, sem dui eleifend magna, ut accumsan velit nulla nec mi. Curabitur dictum sagittis massa a condimentum. Aenean egestas turpis ut dolor convallis aliquam. Donec rhoncus enim sit amet odio molestie, porttitor tempus risus viverra.</span>
  <button>READ MORE</button></p>
  </container>