Как ограничить ширину элемента, не задавая ширину явно?

Question

[Алексей Аристов]

Пусть в ячейке таблицы размещается div, а для div-a задаётся класс:

.cutted {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Чтобы text-overflow: ellipsis; срабатывал, требуется чтобы ширина колонки была фиксированной. Это достигается с помощью

table {
	table-layout: fixed; /* нужно, чтобы срабатывал класс .cutted */
}

Но если этот же div поместить вместо таблицы в список, то div растягивается по ширине содержимого, растягивая по ширине и весь список.
Если ширину div-a или li задать явно, например, width: 300px;, то text-overflow: ellipsis; начинает работать.

Как заставить работать text-overflow: ellipsis; для div-a, помещённого в список, не задавая ширину списка или блока явно?

Answer 1

[Евгений Вольф]

codepen.io/anon/pen/PbyJVQ

Пример куска кода/текст взят отсуда (сохраняю авторские права).

Таким образом, Вы не задаёте ширину элемента, Вы ограничиваете его ширину.

Comments

[Алексей Аристов]

В вашем примере ширина блока задаётся явно:
> max-width: 200px;
В таблице такое ограничение не требуется: ширина колонки задаётся в процентах от ширины экрана.

[Евгений Вольф]

Алексей Аристов: так и блоку можно задать ширину в процентах от ширины экрана, например:
max-width: 10vw; - 10% ширины экрана...

[Евгений Вольф]

Алексей Аристов: либо я что-то не понимаю в Вашем вопросе... Какой бы ширины не был в итоге блок, если текст в него не помещается - он обрезается с многоточием (text-overflow: ellipsis;). Если как-то искуственно ограничить блок в максимальной ширине - текст так же обрезается.

[Алексей Аристов]

Евгений Вольф: text-overflow: ellipsis; не срабатывает, т.к. браузер растягивает список по ширине текста с учётом nowrap. Никаких многоточий не появляется. В этом и заключается проблема.

max-width: 10vw; работает, но я зря сослался на ширину экрана: ширина колонки задаётся в % от ширины родителя, и мне надо ограничить список по родителю. При таком решении в разных масштабах экрана получается разный результат. Такое решение не подходит.

max-width: 30% ограничивает ширину списка, но при этом контейнер, который его содержит, растягивается по ширине так, как если бы список не ограничивался по ширине.

Сейчас я обернул список в ещё одну таблицу с table-layout: fixed; и всё стало работать как надо, но это, на мой взгляд, кривое решение.

[Евгений Вольф]

Алексей Аристов: Обновил список ограничен в 30% ширины, текст всё так же лежит внутри списка и не растягивается за его пределы... Видимо я всё-таки что-то не понимаю. Я думаю, будет оптимальнее всего, если Вы напишите пример "как не работает" на CodePen.

[Алексей Аристов]

Евгений Вольф: у меня в коде примерно такая ситуация получилась.

[Евгений Вольф]

Алексей Аристов: у меня текст обрезан ровно по ширине LI'шки. У Вас не так?

[Алексей Аристов]

Евгений Вольф: это влияет max-width у тега ul. Если его убрать, то ul будет на всю ширину колонки. Но колонка должна быть 33% от ширины таблицы, а сейчас она расползается по полной ширине ul.

[Алексей Аристов]

Евгений Вольф: если у table поставить table-layout: fixed, то получается желаемый результат.

[Евгений Вольф]

Алексей Аристов: https://codepen.io/anon/pen/bBmZZX - у меня вот так работает :D