Авто-масштаб текста под размер контейнера с CSS

Быстрый ответ

Для того чтобы текст автоматически масштабировался в пределах размера фиксированного контейнера, можно использовать JavaScript для динамической регулировки font-size до тех пор, пока текст идеально не впишется в заданные границы. Пример реализации такого подхода:

#fixedContainer {
  max-width: 300px; max-height: 150px; overflow: hidden;
}

// Запускаем динамическое изменение размера текста
function scaleText(container) {
  // Целевой элемент-контейнер
  let el = document.getElementById(container);

  // Выставляем размер шрифта таким образом, чтобы он уложился в рамки контейнера
  for (let fs = 100; el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth; fs--) {
    el.style.fontSize = `${fs}px`;
  }
}

// Применяем функцию к элементу
scaleText('fixedContainer');

<div id="fixedContainer">Адаптируй меня! Я предпочитаю правильный размер 🏋️‍♀️</div>

Скрипт начинает работу с размера шрифта 100px и уменьшает его, пока текст не заполнит контейнер, что идеально подходит для заголовков и небольших статей!

Детальное рассмотрение масштабирования: Широкий взгляд

Представленный выше код JavaScript является отличным решением для базовых задач. Но в реальном мире могут потребоваться дополнительные настройки. Давайте подробнее рассмотрим масштабирование текста.

Для любителей jQuery: Плагин Textfill

Если вы предпочитаете jQuery, вам будет интересен плагин Textfill, который с помощью цикла do-while подбирает наиболее идеальный размер шрифта для контейнера.

Подробнее об этом расскажет наш спикер на видео

Без использования JavaScript: Жидкая типографика

Те, кто хочет найти решение с использованием CSS, могут обратиться к жидкой типографике, которая предлагает комбинацию гибких единиц измерения (vw, vh, vmin, vmax) и функции calc(), что позволяет создавать формулы для гибкого изменения размера текста в соответствии с размерами окна просмотра.

Есть несколько контейнеров? – Без проблем

Если требуется масштабировать текст для нескольких контейнеров одновременно, то использование CSS классов позволит применить логику масштабирования ко всем контейнерам сразу.

Переполнение мы не приветствуем!

Во избежание выхода текста за границы контейнера всегда добавляйте overflow: hidden в ваши стили. Пользуйтесь offsetHeight и offsetWidth, чтобы правильно сопоставить размеры текста с размерами контейнера.

Для сложного содержимого рекомендуем плагины: jQuery-bigtext

Если контент включает переносы строк и иконки, рассмотрите плагин jQuery-bigtext.

Поддерживаем чистоту кода

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

Визуализация

Наглядная иллюстрация того, как текст адаптируется под размеры фиксированного контейнера:

Контейнер (📦): [..........]
Текст (📝), который в него помещается:

  Мелкий текст (📝): [Привет...🔍]
  Средний текст (📝): [Привет, мир!🔍🔍]
  Крупный текст (📝): [ПРИВЕТ, МИР!!🔍🔍🔍]

Этот простой пример хорошо иллюстрирует процесс масштабирования.

Полный комплект: Обеспечиваем отзывчивость и адаптивное масштабирование

Задача не заключается только в подгонке текста внутрь контейнера. Также необходимо учесть удобство чтения и персонализацию.

Размеры экранов: одни и те же размеры не подойдут всем

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

Доступность: сохраняем читаемость для каждого

Уделяйте внимание доступности. Задавайте в коде максимальные и минимальные значения размеров шрифта, чтобы обеспечить удобство чтения текста для всех пользователей, включая тех, у кого есть ограничения зрения.

Точность: дьявол в деталях

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

Полезные материалы

1. Жидкая типографика | CSS-Tricks — основы жидкой типографики для гибкого изменения размера текста.
2. Основы стилизации текста и шрифтов – Учебник по веб-разработке | MDN — урок MDN по адаптивной стилизации текста с помощью CSS.
3. Адаптивный веб-дизайн – A List Apart — глубокие познания в области адаптивного веб-дизайна.
4. Типографика на основе единиц измерения окна просмотра | Zell Liew — интересный подход к масштабированию текста с использованием единиц измерения окна просмотра.
5. GitHub – rikschennink/fitty: ✨ Подгоняет текст под идеальный размер — плагин Fitty, помогающий в масштабировании текста.
6. FitText – Плагин для динамического изменения веб-шрифтов — FitText, для эффективного масштабируемого размера шрифтов.
7. Блог по веб-дизайну | WDD — подробности о создании масштабируемой и отзывчивой типографики.