我正在关注 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>
最佳答案
您的代码可能适用于 bootstrap 3。但由于您使用的是 bootstrap 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;
}
另外提醒您 ::after
是一个伪元素,因此请使用双冒号表示法
关于html - Bootstrap 4 : Display two lines followed by a Read More expandable link,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55879271/