Невозможно вертикально выровнять обычный текст в div вместе с переполнением текста: ellipsis - PullRequest
Новая
       41

Невозможно вертикально выровнять обычный текст в div вместе с переполнением текста: ellipsis

0 голосов
/ 14 июня 2019

Я работаю с ag-grid и сталкиваюсь с проблемой, когда не могу выровнять текст по вертикали в div вместе с text-overflow: ellipsis.Существует возможность использовать flexbox align-items: center, но в этом случае вам нужно добавить еще один элемент DOM.(https://css -tricks.com / flexbox-truncated-text ), что неприменимо в моем случае, потому что я не хочу использовать cellRendererFramework для каждой ячейки.

Возможно ли это сделать без добавления дополнительных элементов DOM в родительский элемент div?

Вот демоверсия: https://codepen.io/anon/pen/QXjebq

1 Ответ

1 голос
/ 14 июня 2019

Решение 1 - с родительским контейнером

Вы действительно должны добавить родительский контейнер и применить к нему display: flex; align-items: center.Попробуйте приведенный ниже фрагмент кода, он вам поможет.Спасибо 

.parent {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  height: 100px;
  width: 100px;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="parent">
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>
</div>

Решение 2 - Без родительского контейнера

Вы также можете достичь, просто добавив display: table-cell; vertical-align: middle; max-width: 100px;.Попробуйте приведенный ниже фрагмент кода, он вам поможет.Спасибо 

.text {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  max-width: 100px;
  height: 100px;
  border: 1px solid #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>
...