Отрегулируйте высоту строки, когда текст разбивается на 2 строки

Question

У меня есть поле с текстом.Текст динамически добавляется.Это может быть одно слово, одно предложение, или оно может разбиваться на несколько строк.

В поле, однако, я буду отображать максимум 2 строки.

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

То, что я имею до сих пор, - это текст по горизонтали, но не по центру.Я попытался использовать display: flex, который исправляет проблему для однострочного текста, но не дает желаемого результата, когда их два.Мне нужно, чтобы он показал первые две строки.

Ниже приведен код, который у меня есть:

.item {
  width: 245px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin-top: 20px;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="item">
  Some Text
</div>

<div class="item">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

<div class="item flex">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

Если у меня есть способ установить стили в зависимости от того, разбита ли линия на две, я могу просто установить две разные высоты строки.40px для одного и 20px для другого.

Как получить текст по центру по вертикали и горизонтали, не изменяя высоту строки, необходимую для обрезки текста в 2 строки?

Answer 1

Попробуйте с набивкой, как,

.item {
  width: 245px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:10px;
  padding-bottom:10px;
}

Answer 2

Попробуйте использовать TABLE CELL для вертикального выравнивания.

<div class="table">
 <div class="item cell">
    Some Text
 </div>
</div>

CSS

.table{
    display:table;
}
.table .cell{
    display:table-cell;
    vertical-align:middle;  
}