Как с помощью css подстроить размер текста под размеры блока?

Question

[alysenko]

Есть задача: нужно текст поместить в div определенного размера, если текст не влазит в блок, то не обрезать его, а уменьшить размер текста, так, чтобы он влез полностью.
Есть ли возможность сделать такое на css?

Comments

[Алексей]

Что значит

уменьшить размер текста, так, чтобы он влез полностью

?
Если вставляют "Войну и Мир" в размер блока 100 на 100 px, то шрифт должен быть уменьшен настолько, что текст можно будет прочесть только под микроскопом?

[alysenko]

Алексей, "уменьшить размер текста, так, чтобы он влез полностью" - если текст не влазит в блок уменьшить значение font-size

[Алексей]

alysenko, это я как раз понял. Но есть физические пределы. Размер блока 100х100 это всего 10000 пикселей. В произведении "Война и мир" больше 10000 символов, потому даже если каждый символ будет равен одному пикселу, он в любом случае не влезет.
Речь о том, что универсальный вариант вы не создадите. Речь может быть только о дискретности. Например до 200 символов - один шрифт, от 200 до 400 символов другой шрифт, но когда дойдете до 10000 символов, в любом случае придется текст обрезать.
В любом случае без JS не обойтись.

[Danila]

используй svg text

Answer 1

[Ivan Bogachev]

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

Answer 2

[Andrew]

Никак, а вот через JS вполне.
1) https://github.com/zachleat/BigText
2) https://github.com/davatron5000/FitText.js

Да и это в нагрузку simplefocus.com/flowtype