实现 Bootstrap Collapse “阅读更多”而无需绝对高度

Question

此代码片段应显示一个水平 Bootstrap 卡，其中包含

.collapse

，它使用

min-

和

max-height

来实现部分折叠。 （请以全页模式运行，以防滚动条不允许显示卡片的垂直高度）：

.collapse.collapse-partial.collapse-mh-parent:not(.show) {
    max-height: 200px !important;
    overflow:   hidden;
  
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

.collapse-partial.collapse-mh-parent.collapsing {
    min-height: 200px !important;
}

button.collapse-partial.collapsed:after  {
    content: '+ Read More';
}

button.collapse-partial:not(.collapsed):after {
    content: '- Read Less';
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="card">
   <div class="row g-0">
      <div class="col-4">
         <div class="bg-black position-relative mh-inherit rounded-start" style="">
            <img src="https://dummyimage.com/400x700/000/fff" alt="suede" class="card-img-top img-fluid opacity-6 mh-inherit" style="object-fit: cover;object-position: center;">
            <div class="card-img-overlay text-white d-flex align-items-end justify-content-between">
               <h1 class="card-title text-white mb-0">suede</h1>
               <div class="text-white">
                  <button class="btn icon-md bg-dark bg-opacity-75 text-white rounded-circle m-1"><i class="fa fa-play"></i></button>
                  <div class="dropdown icon-md">
                     <button class="btn icon-md bg-dark bg-opacity-75 text-white rounded-circle m-1" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Add tracks to playlist"><i class="fa fa-plus"></i></button>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-8">
         <div class="card-body d-flex flex-column justify-content-between h-100">
            <div id="artist-info" class="d-flex flex-grow-1 text-center text-md-start flex-column align-items-center overflow-hidden collapse collapse-partial collapse-mh-parent">
               <div class="mb-1">
                  <div class="row justify-content-center">
                     <div class="col-auto">
                        <a href="/genre/GLAM%20ROCK" class="nav-link badge bg-success bg-opacity-10 text-success mb-2 fw-bold">GLAM ROCK</a>
                        <a href="/genre/POP%2FROCK" class="nav-link badge bg-success bg-opacity-10 text-success mb-2 fw-bold">POP/ROCK</a>
                     </div>
                  </div>
               </div>
               <div class="mb-3 text-center">
                  <div class="btn-group">
                     <button class="btn btn-info-soft btn-xs" type="button">Unrated</button>                     
                  </div>
               </div>
               <div class="mb-1">
                  English alternative rock band from London formed in 1989, disbanded 2003.<br>
                  Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
                  <br>
                  Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
                  English alternative rock band from London formed in 1989, disbanded 2003.<br>
                  Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
                  <br>
                  Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
                  English alternative rock band from London formed in 1989, disbanded 2003.<br>
                  Reunited in 2010 for a series of concerts, the band released four studio albums and two live albums since then.<br>
                  <br>
                  Due to legal issues, the band releases its records under the name "The London Suede" in the USA.
               </div>
            </div>
            <div class="d-flex justify-content-center">
               <button class="btn btn-info-soft btn-xs collapse-partial collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#artist-info" aria-expanded="false" aria-controls="artist-info">           
               </button>            
            </div>
         </div>
      </div>
   </div>
</div>

目前我必须使用绝对

px

值设置高度。然而，这意味着

.collapse

区域不会自然地填充其区域。

默认情况下，如何让

.collapse-partial

填充所有垂直空间？

单击阅读更多时，卡片应垂直展开以显示所有内容。图像不应调整大小。

Answer 1

fit-content 将在哪里以及如何使用？ ...

const 
  textContent = document.querySelector('#text-Content')
, btnReadMore = document.querySelector('#btn-read-More')
  ;
btnReadMore.onclick =_=> textContent.classList.toggle('noMore');

#btn-read-More::after {
  content : 'read Less...'
  }
#text-Content.noMore + #btn-read-More::after {
  content : 'read more...'
  }
#text-Content  {
  height  : fit-content;
  }
#text-Content.noMore > span {
  display : none; 
  }

<div id="text-Content" class="noMore">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
  <span>
    Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. 
  </span>
</div>
<button id="btn-read-More"></button>