Уменьшение размера текста относительно его количества — как действовать?

Question

[Денис Букреев]

Спасибо дизайнерам за такую удачу заниматься полной ерундой.

Задача. Есть блок динамичного текста (он может быть разного размера). Сам блок имеет фиксированную высоту.
Текст может не вмешаться - проблемес.
Я решил, что надо регулировать размер текста, если он не влезает по высоте в родителя.

Как действовать? Как мыслить?
Что-то ума не приложу: сравнивать высоту родителя и текста и, если высота текста больше - уменьшать его размер на единицу, пока высота не станет меньше или равна?

Comments

[Kovalsky]

Не по теме, но всё же мне кажется, что это дизайнерский фэил. Лучше попросить его придумать чо-нибудь человеческое, чем городить подобное.

[Павел Радьков]

Тоже считаю, что это дизайнерский фейл. Как вариант можно ставить многоточие Как использовать text-overflov: ellipsis; для текста в несколько строк?

[Ingernirated]

Напишите размер блока, шрифта и пример максимального кол-ва текста, которые собираетесь там размещать.

[Денис Букреев]

Никита Полевой: исправление этого фейла ломает всю концепцию сайта
выхода нет

[Kovalsky]

Денис Букреев: в соседнем треде девушка тоже жаловалась что клиент какую-то херню просит, не нравится ему что меню на две строки растягивается при -30% зуме. Вроде закончилось тем, что она ему объяснила маразматичность таких требований. Мне кажется вам тоже стоит попытаться вашего дизайнера уговорить потратить хоть немного времени на изобретение какого-нибудь дизайнерского решения.

Погодите, вы говорите у вас блок фиксированного размера, а в нем должен быть текст? Если так, то это ошибка дизайна, тк при статичных размерах блока единственным решением может быть изменение размера шрифта или текста. А это неприемлимо с точки зрения дизайна. Разве нет?

[Dark Hole]

Был у меня баг такой. Но я не понял, в чем он был.

Answer 1

[Дмитрий]

А если заюзать text-overflow: ellipsis? А если человек хочет до конца прочитать, то по тыку убирать это свойство и контейнер меняет свою высоту в зависимости от текста. Типо как в вк "Читать далее".

Comments

[Денис Букреев]

нет, текст должен быть виден
это заголовок в 2-4 строки

[Дмитрий]

Денис Букреев, тогда нужно объяснить тому, кто будет составлять эти заголовки, что нужно как-то укладываться в эти рамки. Иного выхода нету)

Answer 2

[Павел Радьков]

Можно попробовать использовать transform: scale().

1. Узнавать через js высоты контейнера и блока текста. Текст пока с прокруткой.
2. Высчитывать через пропорцию коэф. уменьшения, чтобы выровнять высоту блока текста и контейнера.
3. Применять к блоку с текстом transform: scale() с вычисленным коэффициентом. Тогда видимая ширина блока текста внутри контейнера уменьшится, появятся margins справа и слева.
4. На тот же коэффициент увеличить ширину блока текста. Тогда текст начнет занимать меньше строк и под текстом появится пустое пространство.
5. Похимичить с формулами, чтобы отступ снизу был минимальным.

Может этот вариант натолкнет вас на решение. По крайней мере у него фиксированное количество итераций.

Comments

[Денис Букреев]

transform: scale() работает не корректно - на большинстве значений текст будет мутным

Answer 3

[dom1n1k]

Не надо фантазировать на пустом месте.
Если текст не очень важен - обрезать с многоточием.
Если важен - блок скроллится.
Всё.