Хранить информацию в div всегда отображать с определенным количеством строк

Question

У меня есть вопрос о том, как я могу сохранить информацию внутри div всегда отображается в определенном количестве строк.

Как указано в структуре внутри JSFiddle, у меня есть 3 вида информации для отображения в div. Иногда каждый из них будет коротким, как одна строка, но иногда они могут быть длинным именем, отображаемым в несколько строк. И для<p class="promotion-content">"которые могут появляться время от времени.

Так что я хочу, чтобы эта информация в div всегда отображалась в 3 строках. Если внутри "рекламного контента" есть информация, будет показан только рекламный контент, он все равно будет иметь высоту 3 строки, даже если его информация имеет менее 3 строк.

Поэтому, когда я не буду продвигать объявления, будут отображаться только название бренда и название продукта, и они ограничены высотой в 3 строки. Но если оба имени короткие, которые имеют только 2 строки, у меня все равно будет пустое третье. Могу ли я сделать это с помощью HTML и CSS, кроме добавления
сам для каждого связанного продукта?

Я не совсем понимаю, как это сделать, и я пытался с ограничением по высоте, но, похоже, это не работает. Мне интересно, могут ли они быть сделаны трюками HTML и CSS? Может кто-нибудь, пожалуйста, дайте мне какое-то направление на это? Спасибо!!!

Answer 1

Вы можете установить минимальную высоту для 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