我正在尝试创建一个包含多个段落的部分，您可以扩展以阅读更多或更少。我如何使用纯引导 css 将它们区别开来，以免一次打开和关闭？
#summary {
font-size: 14px;
line-height: 1.5;
}
#summary p.collapse:not(.show) {
height: 62px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#summary p.collapsing {
min-height: 42px !important;
}
#summary a.collapsed:after {
content: '+ Read More';
}
#summary a:not(.collapsed):after {
content: '- Read Less';
}
按照此示例：
代码笔
查看下面的代码片段。 您需要使用不同的 ID 才能获得所需的输出。
#summary {
font-size: 14px;
line-height: 1.5;
}
#summary p.collapse:not(.show) {
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#summary p.collapsing {
min-height: 42px !important;
}
#summary a.collapsed:after {
content: '+ Read More';
}
#summary a:not(.collapsed):after {
content: '- Read Less';
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div id="summary">
<p class="collapse" id="collapseSummary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>
<p class="collapse" id="p1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed" data-toggle="collapse" href="#p1" aria-expanded="false" aria-controls="collapseSummary"></a>
<p class="collapse" id="p2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed" data-toggle="collapse" href="#p2" aria-expanded="false" aria-controls="collapseSummary"></a>
</div>
</div>
</div>为每个部分设置不同的 id，为每个链接设置不同的 href 目标。
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div id="summary">
<p class="collapse" id="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed" data-toggle="collapse" href="#section1" aria-expanded="false" aria-controls="section1"></a><br /><br />
<p class="collapse" id="section2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed" data-toggle="collapse" href="#section2" aria-expanded="false" aria-controls="section2"></a>
</div></div></div>
您可以通过更改 ID 来执行此操作
试试这个：
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div id="summary1">
<p class="collapse1" id="collapseSummary1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed1" data-toggle="collapse" href="#collapseSummary1" aria-expanded="false"
aria-controls="collapseSummary"></a>
</div>
</div>
<div class="col-md-4">
<div id="summary2">
<p class="collapse2" id="collapseSummary2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
</p>
<a class="collapsed2" data-toggle="collapse" href="#collapseSummary2" aria-expanded="false"
aria-controls="collapseSummary"></a>
</div>
</div>
</div>
</div>
#summary1,
#summary2 {
font-size: 14px;
line-height: 1.5;
}
#summary1 p.collapse1:not(.show),
#summary2 p.collapse2:not(.show){
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#summary1 p.collapsing1,
#summary2 p.collapsing2 {
min-height: 42px !important;
}
#summary1 a.collapsed1:after,
#summary2 a.collapsed2:after {
content: '+ Read More';
}
#summary1 a:not(.collapsed1):after,
#summary2 a:not(.collapsed2):after{
content: '- Read Less';
}