@lilwings

Как сделать overflow-hidden в 100% ширине?

Есть такая верстка:



Необходимо чтобы текст занимал 100% доступной ширины и если текст выходить за блок, то он бы сокращался и в конце добавлялись 3 точки.

Работает если тексту сделать max-width: Npx; Но ширина всегда разная. Как можно сделать text-overflow: ellipsis; с max-width: 100%;?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Ширина не 100%.
100% считаются от ширины родительского блока.
Но в родительском блоке есть еще img.
Значит нужно задать ширину за вычетом ширины картинки.

Ну и ellipsis пишется вот так, а не как у вас.
Ответ написан
@Firsov36
full-stack web developer
Во-первых не text-overflow: ellipse; а text-overflow: ellipsis;

Во-вторых, для родителя .line сделайте не display: flex; а display: contents;

.text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line {
  width: 100%;
  display: contents;
  align-items: center;
  white-space: nowrap;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы