css - минимальная высота по количеству строк

В 2024 году да, вы можете использовать min-height: 1lh;.

lh обозначает высоту строки: 1lh соответствует одной строке, 3lh — трем строкам.

Высота строки изменяется в зависимости от размера шрифта.

Поддержка в браузерах улучшается: вы можете ознакомиться с информацией здесь.

Вот пример:

.one-line {
  min-height: 1lh;
  background: cyan;
  color: black;
}

.three-lines {
  min-height: 3lh;
  background: blue;
  color: white;
}

.font-size-sm {
  font-size: 16px;
}

.font-size-lg {
  font-size: 32px;
}

<div class="one-line font-size-sm">1 строка маленький шрифт</div>
<div class="three-lines font-size-sm">3 строки маленький шрифт</div>

<div class="one-line font-size-lg">1 строка большой шрифт</div>
<div class="three-lines font-size-lg">3 строки большой шрифт</div>

Таким образом, вы можете использовать единицу измерения lh для задания минимальной высоты элементов.

Чтобы достичь этого, я использовал flexbox и min-height.

Поместите каждый из ваших div элементов в контейнер flexbox, чтобы они имели одинаковую высоту и адаптировались под разные размеры экрана (т.е. используйте точки останова, wrap в flexbox и min-width, чтобы минимизировать вероятность появления более чем 3 строк текста). Затем для каждого из внутренних элементов установите значения min-height и line-height, как предложил @o.v. Значение min-height должно равняться font-size умноженному на множитель line-height.

Мне нужно было, чтобы внутренние абзацы были как минимум 2 строки в высоту (существует высокая вероятность, что они будут содержать 1 или 2 строки текста, и очень низкая вероятность, что они будут содержать более 2 строк текста), поэтому я пришел к следующему:

HTML

<div class="flex-container">
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

CSS

div.flex-container {
  display: flex;
}
div.flex-container p {
  font-size: 1em;
  line-height: 1.125; // По умолчанию 1.2, но может варьироваться в зависимости от браузера
  min-height: 2.25em; // 2 * 1em * 1.125
                      // (количество строк) * (размер шрифта) * (множитель line-height)
}

Таким образом, вы сможете добиться нужного вам результата с использованием flexbox и правильной настройки высоты внутренних элементов.

Я не знаю, зачем вам это нужно, но вы можете зафиксировать высоту и ширину div-класса в зависимости от размера шрифта, который собираетесь использовать. Например, если ваш размер шрифта — 10px, и вы собираетесь использовать отступ в 10px, установите высоту div на 50px. Затем добавьте margin-bottom к этим div, и, как мне кажется, у вас все получится!