Задание фиксированной высоты блока в две строки

[akerbat]

Здравствуйте!

Есть страница с блоками такого плана. Эти блоки размещаются один за одним в ряд.

<div class="item" style="width:300px;float:left;">
  <div class="item-img">
      <img src="" style="height:140px" />
  </div>
  <div class="item-name">
      <a href="#">строка текста<a/>
  </div>
  <div class="item-params">
      <!--html-->
  </div>
  <div class="item-buttons">
      <!--html-->
  </div>
  
</div>

Ширина блока строго фиксирована. В зависимости от длины текста в теге <a> (блок .item_name) он размещается в одну или в две строки. Из-за этого div'ы, следующие за .item-name,  располагаются в разных блоках на разном уровне. 

Вопрос: как сделать высоту блока .item-name фиксированной и равной всегда двум строкам. Мне пришло в голову только прописать высоту жестко, например min-height:50px;  Но в этом случае если размер шрифта увеличится, то высота опять будет различаться. Есть более оптимальное решение этой задачи?

Edited August 26, 2017 by akerbat

[wwt]

.item-name {
	height: 2em;
}

 

[akerbat]

В 27.08.2017 в 11:17, wwt сказал:

.item-name {
	height: 2em;
}

 

em - размер шрифта, т.е. font-size. А размер строки - это line-height, который обычно больше размера шрифта.

[wwt]

Это просто отсылка к тому что нужно использовать относительные единицы измерения.

Вот рабочий пример https://jsfiddle.net/xgj5meef/

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