使用 HTML、CSS 和 JS 创建可折叠卡片

Question

我正在尝试创建一张可折叠的卡片。我有一个

div

对象，其中包含 HTML 元素

.element {
  background-color: grey;
  margin-bottom: 0.7rem;
  padding: 1.4rem;
  border-radius: 10px;
}

<div class="element">
  <div class="content">
    <h2>title</h2>
    <p class="longText">
      different lines of text....
    </p>
    <p>author</p>
  </div>
</div>

虽然标题和作者仅由一行文本组成，但元素内的文本原则上可以由多行组成。

我想要获得的是一张卡片，其中仅包含

<p></p>

内文本的第一行，当我单击它时，它会展开并显示其余文本。显然，如果文本很短并且 1 行足以显示全部内容，那么单击应该不会执行任何操作。 第一张卡片应与第二张卡片类似，单击后会展开以显示全文。

我尝试通过在

max-height

中设置

css

属性来解决此问题，然后在单击卡片时在

js

脚本中更改它，但这样它始终显示全文，并且脚本仅进行调整卡片的高度。
我的一个想法是将

<p></p>

分成两个元素，比如

<p class="first_line">
...
</p>
<p class="remaining_text" style="display: none;">
...
</p>

然后在

remaining_text

脚本中更改

js

的显示属性，但是如果我有很多卡片要以这种方式显示，这似乎不太正确。

Answer 1

最巧妙的方法可能是使用建议的

line-clamp

属性来做到这一点。它还不是标准，但所有主要浏览器都实现了它。

document.querySelector('.d1').addEventListener('click', evt => {
  document.querySelector('.longText').classList.toggle('expanded')
})

.d1 {
  background-color: grey;
  margin-bottom: 0.7rem;
  padding: 1.4rem;
  border-radius: 10px;
  cursor: pointer;
}
.longText {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
           line-clamp: 1; 
   -webkit-box-orient: vertical;
}
.longText.expanded {
   display: initial;
}

<div class="d1">
  <div class="content">
    <h2>title</h2>
    <p class="longText">

Pellentesque consequat odio ex, et vulputate tellus varius eget. Vestibulum arcu risus, semper quis erat in, ornare maximus nisi. Vivamus lobortis tortor lectus, eget suscipit ante cursus et. Donec commodo arcu vitae nibh pretium finibus. Nunc porttitor pretium vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla luctus tempor lectus mollis posuere. Aliquam sodales magna a facilisis cursus. Vivamus sollicitudin vel neque vel aliquam. Mauris eu elementum libero, pretium egestas sem. Morbi sed laoreet tortor, sed tincidunt enim. Donec scelerisque dolor et arcu lacinia congue. Ut bibendum efficitur scelerisque.

    </p>
    <p>author</p>
  </div>
</div>