text-fit: свойство, которое дождались

12.06.2026 • css

Введение

Давняя хотелка сбылась. Текст по размеру контейнера. Уже сейчас, в Хроме 150 (ладно, через 5 дней, 17 июня).

И нет, это не просто “крестовая отвёртка”, а, как это принято в современном CSS, целый набор отвёрток и разводной ключ в придачу. Давайте разбираться.

Описание свойства

Думаю, первое, что вы захотите сделать – увеличить текст до размеров контейнера:

.block {
    text-fit: grow;
}

Как можно догадаться, grow означает рост размера текста. Как это работает? Берётся базовый размер текста, а затем масштабируется, чтобы текст занимал всю доступную ширину. Меньше текст с таким свойством становиться не будет.

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

.block {
    text-fit: grow 120%;
}

Это приведёт к тому, что рост будет, но не больше определённого значения. А что с уменьшением? Тоже можно:

.block {
    text-fit: shrink;
}

Как это работает? Для того, чтобы текст уменьшался, нужно, чтобы он был больше доступной ширины. Из чего следует, что многострочный текст не будет “уменьшен” до однострочного. Получается, для эффективного использования shrink часто пригодится white-space: nowrap. Без nowrap тоже сработает, например, если есть длинное слово без переносов. Конечно, и с этим значением можно указать проценты, которые ограничат уменьшение снизу:

.block {
    text-fit: shrink 80%;
}

Что ещё? Есть два интересных ключевых слова, которые можно указать после grow и shrink:

.block {
    text-fit: grow per-line 120%;
    /* или per-line-all, а можно и без процентов */
}

И тут у нас говорящее за себя название. Два указанных ключевых значения будут масштабировать текст построчно. per-line масштабирует все строки, кроме последней, а per-line-all просто все. Связано такое поведение с тем, что все строки, кроме последней, обычно забиты на всю ширину, а последняя может быть очень короткой.

в реальности будет немного по-другому, так как ширина будет влиять на переносы

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

Как свойство не работает

Посмотрев на всё это, можно подумать, что свойство позволяет как увеличивать текст, так и уменьшать. Однако можно задать только один режим, а значения по типу grow 120%, shrink 90% некорректны. Либо увеличивать текст, либо уменьшать.

Также нет возможности и “поместить” текст в указанный прямоугольник. Свойство учитывает только один размер для масштабирования. А уж что там будет по второй оси – не задача свойства.

Использование

Далее субъективное мнение про использование свойства.

Помимо явных декоративных элементов текста, которые должны привлекать внимание своим внешним видом, значения per-line и per-line-all могу представить разве что в специальных элементах с юридическим описанием (которые по закону должны занимать определённую площадь, например, про медицинские противопоказания). Это – идеальный пример случая, где без нового свойства у разработчиков довольно скупой набор вариантов.

Также я бы опасался и shrink. Без явного ограничения текст может стать очень маленьким (особенно учитывая случаи произвольного текста, локализации, встроенных переводчиков).

И вообще получается, что свойство может “обнулить” пользовательское увеличение шрифта. Предположим, что пользователь настроил увеличение шрифта в браузере, а свойство было рассчитано под обычный шрифт (и с ним оно уменьшало текст незначительно). В ряде случаев текст станет меньше вдвойне и обнулит пользовательское увеличение.

Также карикатурно может смотреться и изменение размера текста “вразнобой”. Не думаю, что стоит подгонять размер текста одинаковых элементов, стоящих рядом друг с другом – если их больше 2х, то получится нелепо.

Возможно, хороший пример использования – названия сервисов. В ряде случаев их можно будет делать не SVG, а просто текстом.

Итого

Похоже, перед нами стоит новая задача. Мы столько лет ограничивали себя тем, что такое нельзя сделать, что теперь, получив это свойство, нам нужно придумать, куда его лучше применить)

Стоит очень внимательно подумать про доступность: одно неверное движение с shrink, и текст может получиться нечитабельным для ряда пользователей. Никогда не измеряйте читабельность текста по себе! Мол, мне нормально, значит, и другие прочтут. Вспомните о ваших родителях, бабушках, дедушках – наверняка у них в телефонах стоит крупный шрифт.

В остальном – я хочу увидеть интересные применения этому свойству. Я что-то забыл из вариантов? Предлагайте в комментариях.

Почитать ещё посты