Я пишу код с помощью HTML, CSS, JS и начальной загрузки.В моем коде ссылка «показать больше» работает, но вопрос в том, что когда в абзаце есть только одна строка, я хочу, чтобы ссылка «показать больше» была скрыта и не отображалась на экране.
.container {
width: 500px;
}
.container p.collapse {
display: block;
height: 47px;
overflow: auto hidden;
}
.container p.collapsing {
height: 47px;
}
.container p.show {
height: auto;
}
.container a.collapsed:after {
content: '+ Show More';
}
.container a:not(.collapsed):after {
content: '- Show Less';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div id="module1" class="container">
<h3>Bacon Ipsum</h3>
<p class="collapse" id="collapseExample1">
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`enter code here`.
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1" id="module1">
</a>
</div>
<div id="module2" class="container">
<h3>Bacon Ipsum</h3>
<p class="collapse" id="collapseExample2">
Bacon ipsum dolor amet doner picanha tri
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2" id="module2">
</a>
</div>