html - 使动态 MdBootstrap 卡具有相同的高度

Question

无论电影的标题有多长，我都试图让这些卡片的高度相同。卡片是动态创建的，我也使用 swiperjs 作为轮播。这些是 mdBootstrap 卡，只是为了澄清。这是我的代码。

 <div class="swiper-container">
     <div class="swiper-wrapper trending_movies">
         <!-- dynamic cards go here -->
         <div class="swiper-slide">
            <div class="card">
                <div class="icon-button">
                    <ion-icon name="ellipsis-horizontal-circle-sharp" class="ion-icon" 
                    data-movie="${el.title}"></ion-icon>
                </div>
                <a href="${`/client/views/movies.html?movieId=${el.id}&movie=${el.title}`}" data-src="${el.id}" >
                     <img class="img-size" src="${poster_image}" alt="${el.title}">
                </a>
                <div class="card-body">
                    <h6 class="card-title"> ${el.title}</h6>
                    <p>${el.release_date}</p>
                </div>
            </div>
         </div>
     </div>
 </div>

标签： htmlcssbootstrap-4mdbootstrap

Answer 1

您可以像这样在 CSS 文件中使用此属性，否则为您的 p 标签留出余量来控制此问题。

  .card-body{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }