使用纯 CSS 文本的可折叠段落

Question

我已经使用纯 css 使段落可折叠

这里有一个快速演示：https://jsfiddle.net/athulmathew/qmo8hjz7/

#module {
  font-size: 1rem;
  line-height: 1.5;
}


#module #collapseExample.collapse:not(.show) {
  display: block;
  height: 3rem;
  overflow: hidden;
}

#module #collapseExample.collapsing {
  height: 3rem;
}

#module a.collapsed::after {
  content: '+ Show More';
}

#module a:not(.collapsed)::after {
  content: '- Show Less';
}

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
</div>
<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
</div>

面临的问题是我有多个这样的段落，就像我在 jsfiddle 中显示的那样，但我不想打开每个 div 意味着只扩展我拥有的 div点击showmore的点击，我只允许使用纯css有什么办法可以实现它。提前谢谢

更新：我使用了单个 div 和 id 来显示段落，这在 datatable 中，几乎有 100 种不同段落。我可以使用class 名称来代替，这可能吗？

Answer 1

使用不同的 ID。无论如何，您不能在同一页面中多次使用相同的 ID。

Answer 2

我们现在可以使用 CSS line-clamp 属性。与 display 结合使用时将包含给定行数的文本的 CSS 属性：-webkit-box。

对于跨浏览器支持检查： https://caniuse.com/?search=line-clamp

如果您使用的是 tailwindcss，tailwindlabs 有一个官方插件专门用于此目的： https://github.com/tailwindlabs/tailwindcss-line-clamp

.text-collapse {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text-collapse:hover {
  -webkit-line-clamp: unset;
}

<p class="text-collapse">Kitty power munch on tasty moths but put butt in owner's face yet murf pratt ungow ungow yet whatever. Do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy pet me pet me pet me pet me, bite, scratch, why are you petting me for paw at your fat belly. Dead stare with ears cocked to pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly. Unwrap toilet paper kitty poochy, so ha ha, you're funny i'll kill you last burrow under covers need to chase tail stand in front of the computer screen kitty scratches couch bad kitty. Bite nose of your human blow up sofa in 3 seconds lick plastic bags for lick plastic bags or hide when guests come over, for kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls put toy mouse in food bowl run out of litter box at full speed . Meow in empty rooms lick left leg for ninety minutes, still dirty pretend not to be evil.</p>