JavaScript / jQuery: возможно ли изменить размер шрифта для заполнения заданной ширины?

Question

Я пишу приложение, и в нем я хотел бы иметь несколько элементов h1 с переменным размером шрифта.

Я использую полную ширину (1000px) div в качестве ограничителя и скрипт, который автоматически устанавливает шрифт элемента h1 так, чтобы он соответствовал ширине div без разрыва строки.

Это довольно легко сделать с помощью php GD, но я подумал, что хочу сделать это на стороне клиента.

Answer 1

Не думаю, что для этого есть встроенная функция. Я полагаю, у вас не будет выбора, кроме как запустить цикл и изменить размер элемента, пока он не уместится.

Это может работать так:

• Создайте клон DIV, например, с помощью jQuery. element = $('element_id').clone()

• Установите для клона font-size значение 1

• Построить цикл, который

  1. Увеличивает font-size на один пиксель
  2. Проверяет, была ли достигнута желаемая ширина
  3. Если есть, разрывает цикл

font-size в клонированном элементе будет самым близким совпадением для желаемой ширины.

Обновление: Плагин, указанный в ответе @ Pär, делает именно это.

Answer 2

См. Плагин TextFill jQuery, который был создан как часть ответа на Авторазмер динамического текста для заполнения контейнера фиксированного размера