保持 div 中的信息始终以特定行数显示答案

【问题标题】：Keep information in div always display with specific number of lines保持 div 中的信息始终以特定行数显示
【发布时间】：2018-04-25 18:49:26
【问题描述】：

我有一个问题，关于如何将 div 中的信息始终显示在特定行数内。

正如JSFiddle 中的结构所述，我在一个div 中显示了3 种信息。有时它们中的每一个都会短为一行，但有时它们可能是长名称，显示在多行中。而对于偶尔出现的“<p class="promotion-content">”。

所以我想要的是 div 中的那些信息将始终显示在 3 行内。如果“promotion-content”中有信息，则只显示促销内容，即使信息少于3行，高度仍为3行。

所以当我不包含任何促销时，只会显示品牌名称和产品名称，并且它们被限制为 3 行高度。但如果两个名字都很短，只有 2 行，我仍然会有一个空的第 3 行。除了自己为每个相关产品添加
之外，我可以使用 HTML 和 CSS 来做吗？

我对执行所有这些操作的方式感到困惑，我尝试过限制高度，但似乎不起作用。我想知道它们是否可以通过 HTML 和 CSS 技巧来完成？有人可以给我一些指导吗？谢谢！！！

【问题讨论】：

你可以使用ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
@lalitbhakuni 您好，谢谢您的回复。但我并不是说我想说明行号。但是我想保持3行的信息显示，如果信息量很小，它仍然会显示3行的空间。

标签： html css height line paragraph

【解决方案1】：

您可以将 min-height 设置为 div

在 HTML 中

    <div class="information">
      <p class="promotion-content">
      Buy 1 Get 1 Free
      </p>
      <p class="brand-name">
      ABC Brand
      </p>
      <p class="product-name">
      Product Name
      </p>
    </div>

在 CSS 中

    .information {
      min-height:120px;
      border: 1px solid #ddd;
    }

你可以参考这个JSFiddle

【讨论】：

Min-height 可能适用于某些情况...但是如果我稍后可以调整文本大小，是否有任何方法可以让 min-height 随字体大小的变化而变化??
您可以为此使用 css flex 属性。请参阅此示例 flex 示例 codepen.io/imohkay/pen/gpard。让我知道它是否有效。