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

Question

[lilwings]

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



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

Работает если тексту сделать max-width: Npx; Но ширина всегда разная. Как можно сделать text-overflow: ellipsis; с max-width: 100%;?

Answer 1

[Ankhena]

Ширина не 100%.
100% считаются от ширины родительского блока.
Но в родительском блоке есть еще img.
Значит нужно задать ширину за вычетом ширины картинки.

Ну и ellipsis пишется вот так, а не как у вас.

Comments

[lilwings]

Но там же flex, и ширина уже не от 100% родителя считается, а от доступной ширины вроде

[Ankhena]

lilwings, почитайте про флексы вообще и про flex-shrink и flex-grow в частности.

[lilwings]

Ankhena, А можете в 2 словах объяснить пожалуйста?))

Я понял что нужно flex-shrink: 0; поставить чтобы ширина была в 100% родителя.

[Ankhena]

lilwings, вам не нужна ширина родителя.
Вам нужно calc 100% - ширина картинки и отступы.

Как-нибудь так https://jsfiddle.net/kdL95znh/

Answer 2

[lUser L]

Так ?

Comments

[lilwings]

Почти))
max-width: 300px;

Не подходит, максимальная ширина не известна((

[lUser L]

lilwings, не думаю что поможет, но все же посмотри и еще на этот вариант: Тык

[lilwings]

????Эмиль???? Гасанов, Супер, Спасибо))

Я чу-чуть изменил чтобы иконка не загораживала текст:

.text {
  +width: calc(100% - 25px);
  +left: 25px;
}

Answer 3

[Sergey]

Во-первых не 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;
}

Comments

[Виталий Першин]

display: contents; крутое свойство, но поддержка еще очень плохая...

[Sergey]

Виталий, вам не угодишь. Но так или иначе, мой ответ является решением. В вопросе то не было слов о том, чтобы не использовать display: contents!!!))))

Невозможным через css добавить три точки к тексту, который не умещается в свое пространство, из-за display: flex. Надо переверстать тогда верстку на использование display: grid и text-overflow: ellipsis; будет работать.

[Виталий Першин]

Firsov36, Я не критикую, свойство реально полезное с этим не поспоришь, но оно почти во всех браузерах экспериментальное и я бы сейчас на продакшен такое не советовал выкатывать.

[lilwings]

Firsov36, Я что то не подумал о grid))