Как отрезать не помещающийся текст?

Question

[WizardW]

Нужно сделать, чтобы каждый заголовок карточки был однострочный, при этом показывать не фиксированный размер текста, а выбирать количество в зависимости от того, будет переноситься текст или нет. Есть вариант слушать resize событие и чекать размер внешнего div, если больше, чем нужно, то удалять часть текста до того, как размер дива не восстановится, есть варианты лучше/проще?

Comments

[Одиночка Айс]

Это задача Бэкенда, а не фронта. А если про адаптив, то уменьшайте размер шрифта, но задача такая себе, я могу в заголовок хоть "Война и Мир" засунуть.

[WizardW]

Одиночка Айс, с беком фиксированную только если брать, каждый ресайз дергать бек такое себе

[WizardW]

Одиночка Айс, там ситуация такая: на десктопе текст переносится, потому что ширина маленькая из-за 4 карточек в линию, на планшете текст не переносится, потому что карточки в линию 2, ширина больше.

[Одиночка Айс]

WizardW, дополнил коммент

[Сергей Карвасарный]

Можешь типа так сделать, вся суть в этих строках

white-space: nowrap; //запрет переноса строки
    overflow: hidden;
    text-overflow: ellipsis; // сами точки

[Одиночка Айс]

WizardW, вы не должны никого дергать, бэк вам просто заголовки порежет, скажем, на 40-50 символов и поставит многоточие в конце, все.

[Одиночка Айс]

WizardW, так это вопрос адаптива уже

[WizardW]

Сергей Карвасарный, спасибо, то что нужно!

[WizardW]

Одиночка Айс, Сергей дал хороший ответ.

[Одиночка Айс]

WizardW, да я не спорю))

[Петр Мухуров]

Одиночка Айс, как бэк может узнать, сколько эти 40-50 символов займут реального места, если текст не моноширинный? 40 символов WWWW... имеют большую ширину, чем 40 символов iiii...

[Сергей Карвасарный]

WizardW, на здоровье)) помечай меня как лайкабоса - решением))

[Одиночка Айс]

Петр Мухуров, бэку на это плевать вообще

[Петр Мухуров]

Одиночка Айс, зачем тогда забирать с бэка хидеры для карточек, обрезая их

на 40-50 символов и поставит многоточие в конце, все

, какой смысл? Тем более заранее не зная количество символов, которые влезут по ширине? Более дикого бреда я не слышал

[Одиночка Айс]

Петр Мухуров, бред - наивная вера во всесильность фронта

[Одиночка Айс]

Петр Мухуров, а если по существу, стоит задача обрезать заголовок в 1,2,3 строки, подбирается оптимальное кол-во символов, а бред про разную ширину символов оставьте для себя, к реальности оно не имеет никакого отношения.

[Петр Мухуров]

Одиночка Айс, при чем здесь всесильность? Вы хотите пальцем в небо брать количество символов, отправлять их в параметрах гет-запроса, и заставлять сервер обрезать и добивать многоточием, зачем? Какую задачу это решает, если мы не знаем, сколько символов влезает? И на каждый ресайз нам опять делать гет-запрос с пальцем в небо количество символов?) "Всесильность" для данной конкретной задачи реализовывается добавлением 3 css свойств

[Петр Мухуров]

Одиночка Айс, каким образом подбирается оптимальное количество символов?) "40-50"?)

[Петр Мухуров]

Одиночка Айс, в реальности за хождение за хидерами с просьбой обрезать "как получится" текст и добить его многоточием отрывают руки

[Петр Мухуров]

Одиночка Айс, это задача исключительно фронта, тем более что слишком много исходящих данных (ширина и ее постоянное изменение, размер шрифта, который может болтаться в em, и меняться от вьюхи к вьюхе и от дизайна к дизайну

[Одиночка Айс]

Петр Мухуров, какой гет-запрос, о чем вы? Обрезается раз и навсегда для десктопа, на адаптиве уже пофиг сколько там и чего

[Петр Мухуров]

Одиночка Айс, где в вопросе хоть слово про адаптив? Это вообще другой разговор

[Сергей delphinpro]

Одиночка Айс,

бред - наивная вера во всесильность фронта

Фронт имеет максимальный доступ к странице. может получить любые метрики. И совершить любые манипуляции с содержимым. Чем не всесильность?

Answer 1

[Сергей Сунцев]

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

selector{
    display: flex;
    align-items: left;
    max-width: 40px;
    overflow-x: hidden;
    white-space: nowrap;
}

Можно поставить точки в конце блока
text-overflow: ellipsis;

Для основного текста (который в несколько строк) делаем тоже самое, только добавляем max-height с overflow-y: hidden; и убираем white-space