Динамическое изменение размера текста в зависимости от длины и размера контейнера.

Question

Как мне изменить размер некоторого текста в зависимости от длины текста и размера контейнера?

Это для заголовка.Я в основном хочу сказать: «Если динамически сгенерированный <h2> содержит менее 10 символов, увеличьте размер шрифта до 2em, чтобы заполнить пространство. В противном случае оставьте его на 1em».

В идеалеЯ очень хотел бы просто изменить размер текста до максимума.Например, «заголовок не полностью соответствует горизонтальному пространству, поэтому увеличивайте размер шрифта, не переходя на вторую строку».Это выполнимо?

Я не могу отправить вам ссылку, так как сайт не работает.

Answer 1

Также оформить заказ Fittext.js .Вы можете посмотреть на источник, что он делает - который крошечный.

Answer 2

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

Методика обнаружения переполнения описана здесь:

обнаружение переполнения элементов с помощью jquery