Keep information in div always display with specific number of lines

Question

I have a question about how can I keep the information inside a div always displays within a specific number of lines.

As stated as the structure inside the JSFiddle, I have 3 kinds of information to be displayed within a div. Sometime each of them will be short as one line only, but sometimes they may be long name displayed in multiple lines. And for the "<p class="promotion-content">" which may appear occasionally.

So what I want is those information in the div will always display within 3 lines. If there is information inside the "promotion-content", only the promotion content will be shown, it will still be 3 lines height even its information has less that 3 lines.

So when I do not contain any promotion, only brand name and product name will be shown and they are limited as 3 lines height. But if both names are short that only have 2 lines, I will still have a empty 3rd. Can I do it with HTML and CSS other than adding a
by myself for each related product?

I am confused about the way to do all these and I have tried with height limitation but seems it doesn't work. I am wondering if they can be done by HTML and CSS tricks?? Can someone please give me some direction on it? Thanks!!!

Answer 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