如何在div中将最小行数设置为2答案

【问题标题】：How to set min number of lines to 2 in a div如何在div中将最小行数设置为2
【发布时间】：2022-11-14 14:20:08
【问题描述】：

所以我不能让所有卡片的高度都相同，发生这种情况的原因是主标题有时是 2 或 1 行（我已经处理了图像高度的情况）。解决这个问题的最佳方法是什么？我曾尝试使用 min-height 但它在 1 行案例的底部留下了太多空间。我在我的角度项目中使用角度材料库。

组件 html

     <mat-card class="example-card " >
    <mat-card-header  >
      <mat-card-title class="hres">{{ product.name }}</mat-card-title>
      <mat-card-subtitle> {{ product.type | titlecase   }}</mat-card-subtitle>
    </mat-card-header>

    <div >
      <img *ngIf="product.type=='video'" class="imh"  mat-card-image src="../../assets/images/Products/Videos/{{product.image.imageSrc[0]}}" >

      <div>
        <img *ngIf="product.type=='book'" class="imh"  mat-card-image  src="../../assets/images/Products/Books/{{product.image.imageSrc[0]}}" >
      </div>
    </div>
    <mat-card-content>
      <button mat-button>PRICE</button>
      <p style="display: inline;">$ {{ product.price }}</p>
      <button mat-raised-button style="float: right;" *ngIf="!isAdmin" color="primary">Add to cart</button>
    </mat-card-content>
    <!-- <mat-card-actions>
      </mat-card-actions> -->
  </mat-card>

组件 css

  h2 {
    font-size: 1em;
    flex: 1;
  }
  h4 {
    font-size: 0.8em;
    margin: 0;
    padding: 0;
  }
  .tools {
    justify-content: flex-end;
    display: inline-block;
    margin-top: 8px;
    display: flex;
    flex-wrap: nowrap;
  }
  .mC{
    cursor: pointer;

  }
  .cardH{
  }
  .imh{
    /* overflow-y: auto;
    overflow-x: hidden;

     */
    object-fit:scale-down;
    max-height: 25vh;
    min-height: 25vh;
    /* object-position: top; */
  }
  .hres{

    /* max-height: 5vh; */
    /* min-height: 5.5vh; */
    padding-bottom: 0;
  }

这更像是一张单张卡片，图像仅显示网格中的所有卡片（从阵列中循环）。

【问题讨论】：

如果您固定示例卡片的高度，而不是在内容高度发生变化时让它动态变化，则您的图像需要相应地定位。如果您知道标题是唯一动态改变高度的东西，请固定它的高度。对可以在卡片内动态改变高度的元素执行此操作。

标签： html css angular angular-material

【解决方案1】：

我个人认为最小高度解决方案将是最佳选择。如果看起来空间太大，您可以将product.type 移到其他地方。祝你好运。

【讨论】：