Bootstrap 4：显示两行，后跟 Read More 可扩展链接答案

【问题标题】：Bootstrap 4: Display two lines followed by a Read More expandable linkBootstrap 4：显示两行，后跟 Read More 可扩展链接
【发布时间】：2019-09-16 15:44:50
【问题描述】：

我正在关注this 显示两行文本的惊人指南，并为用户提供“阅读更多”的链接。转换未按预期工作。有人可以指出我在这里做错了什么吗？

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

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

#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>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

【问题讨论】：

我正在考虑这个解决方案，但是它会用#collapseExample 更改您的网址，这对我不起作用。

标签： html css bootstrap-4 collapsable

【解决方案1】：

您的代码可能在引导程序 3 中工作。但由于您使用的是引导程序 4，请尝试以下操作。

替换这个

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

有了这个

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

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

Fiddle

还只是提醒您::after 是一个伪元素，因此请使用双冒号表示法

【讨论】：