Как создать адаптивную обрезку текста посредством css?

Question

[Aison]

Ребят, идей нет.
Как можно реализовать адаптивную обрезку текста?

Есть такая конструкция:

.nameClass {
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Необходимо сделать его адаптивным.

Comments

[Ankhena]

Попробуйте сформулировать на родном языке до какой ширины должен тянуться и до какой сжиматься этот блок.
А потом задайте эти значения в max-width и в min-width.
Или просто используйте относительные единицы измерения для ширины.

[Aison]

Ankhena, в том то и дело, что ширина может быть какая угодно.

[Ankhena]

Aison, и зачем вы тогда ставите макс ширину 130px, вместо, например, указания width 100%?

[Aison]

Ankhena, Спасибо, попробую днём

[nowm]

Ankhena, я упустил момент с white-space: nowrap; — спасибо, что обратили на это внимание. Ответ я удалил, так как в нём теперь нет смысла.

В остальном, действительно, только максимальная ширина в пикселях мешает. Если её сделать 100%, то всё должно корректно растягиваться.

[Aison]

Ankhena, nowm, не, рябят, тут проблема..

скрин 1

скрин 2


тут нужно, чтобы была видна явная обрезка текста этого. Это как бы последнее сообщение у чатов. Второй скрин это правильное поведение, то, что мне нужно, но это должно адаптироваться.

и white-space: nowrap; тут обязателен

[Ankhena]

Aison, нет там никакой проблемы.
Задайте ширину как вам нужно и все будет обрезаться как вам нужно.

Выложите код с проблемой на jsfiddle.net - посмотрим что там у вас.

[nowm]

Aison,

и white-space: nowrap; тут обязателен

Я в моём ответе просто писал, что нужно ещё высоту ограничивать с помощью max-height, потому что не принял во внимание white-space: nowrap, который и так помогает сделать высоту стабильной. Так что не волнуйтесь, на white-space: nowrap в вашем коде никто не покушался и не критиковал.

[Ankhena]

Aison, ваша проблема скорее всего просто в верстке этого блока, а вовсе не в адаптивности text-overflow

Вот, пожалуйста, по-простецки, гридами https://jsfiddle.net/r640mu8s/

[Aison]

nowm, Ankhena, Ребяят, звиняйте, стыдно.. такую банальную ошибку... на родителя не кинул width: 100%; жуть.... простите(

[Ankhena]

Aison, со всем приключаются затупы, главное, что всё получилось

[Aison]

Ankhena, да, всё отлично. Со мной часто такое, нужно просто спать идти вовремя)) А не задавать таких вопросов, но может когда-нибудь кому-то это поможет. Спасибо Ankhena и nowm