Как адаптивно сверстать одну ситуацию?

Question

[wartur]

Пожалуйте на пример jsfiddle.net/HKrX3/2/

Проблема в следующем.
Вот в первых двух дивах вы видите переполнение. В одном случае происходит переполнение, во втором происходит обрезка. Кроме того, есть методы, которые позволяют полупрозрачными способами красиво ретушивать переполнение, а так же делать многоточие через CSS.

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

Вопрос:
Есть ли способы CSS, либо готовые либы, которые позволяют делать такие штуки?

Спасибо за внимание.

Answer 1

[Кирилл Сидоров]

jsfiddle.net/uwKb8/ вот такой костыль написал, впринципе работает, но есть много но

Comments

[wartur]

Расскажите про ваши «но», очень интересно, с виду работает кстате!!!

[Кирилл Сидоров]

Я пока спал забыл:) Думаю самый главный минус — скорость работы.

Answer 2

[Стас]

Единственный вариант, который мне видится, это создавать где-нибудь за границами экрана копию текста и циклом сравнивать ширину строки и ширину контейнера, в который его нужно вписать, в каждой итерации уменьшая размер шрифта.

Готовых решей не знаю, думаю что реализовать такое будет не очень сложно.

Answer 3

[Igor]

Самый простой способ это считать количество символов в тексте и ставить нужный класс или размер шрифта блоку. Это пара строк на JS или PHP.

Comments

[Сергей Протько]

Не все так просто, моноширные шрифты для текста явно никто использовать не будет.

[wartur]

да, соглашусь

[Igor]

Да, решение не универсальное и не автоматическое. Но зная шрифт вполне можно рассчитать, сколько символов влезает в блок.

[4ikist]

Посчитать длину каждой буквы алфавита, парсить текст == считать длину текста, присваивать соответствующий класс. «Долго, дорого, но работает».