Как автоматически подогнать размер шрифта, чтобы он полностью заполнял контейнер и зависел от высоты контейнера?

Question

[Иван Гришов]

Здравствуйте.

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

Подскажите пожалуйста, как можно решить эту проблему, может есть какая-то библиотека для этого?

пример, как должен подстраиваться шрифт



Спасибо за любой совет.

https://codepen.io/IvanGrishov/pen/KKoMNro

Comments

[Semantic.Moscow]

начал прикидывать список неожиданных последствий такого решения,
но остановился, просто понаблюдаю.

дадите ссылку?

[Иван Гришов]

Semantic.Moscow, ссылку на что? А какие могут быть неожиданные последствия?

[Semantic.Moscow]

Иван Гришов, на документ (сайт), где это будет применено.

[Иван Гришов]

Semantic.Moscow, нет пока что ссылки

[Андрей Федоров]

Не думаю, что удастся полностью решить вопрос как вы хотите, но попробуйте функцию clamp().

[Иван Гришов]

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

[Андрей Федоров]

Иван Гришов, вы путайте. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

[Иван Гришов]

Андрей Федоров, спасибо, посмотрю

[Иван Гришов]

Андрей Федоров здесь высота блока не постоянная, если использовать clamp(). И шрифт не изменяется автоматически исходя из длины текста

[Андрей Федоров]

Иван Гришов, ну тогда ждите полноценной поддержки медиавыражений от контейнера. К сожалению, это все что вам может предложить css.

[Иван Гришов]

Андрей Федоров, мне не важно css или js, может есть библиотека для этого на js или другое решение, бы было круто

[wadowad]

Я бы тупо подгонял размер шрифта в зависимости от количества символов. Несколько тестовых текстов, начальное значение и далее подгонка коэффициента уменьшения в зависимости от объёма. Ну ещё оставить чуть места на нюансы и выравнять по центру по высоте, чтобы этот момент в глаза не бросался. Плюс какой-либо фикс на превышение на всякий случай.

[Иван Гришов]

wadowad, спасибо большое. Ваше решение "в лоб" оказалось самым адекватным.

Answer 1

[Antony Bark]

В лоб https://codepen.io/tolfy/pen/qBoqZMQ

Comments

[Semantic.Moscow]

ахаха!
вот это решение!
браво!
очень красиво.
только как это применить к размеру отдельного блока?

но всё равно, утащил в заметки.

[Ankhena]

Хотя бы как это применить, чтобы вписался во вьюпорт и условно полностью занял его?

[Antony Bark]

Ankhena, подбором параметров, иначе пляски с буб.. JS

[Ankhena]

Antony Bark, так и я о том же, что проблему это не решит. Даже при известном тексте.
Да JS не очень, при странных пропорциях блока.

[Antony Bark]

Ankhena, погодите.. У нас есть W-viewport, с неясным scroll (положим, мы не хотим ловить его ч\з JS). Есть блоковый box с известными метриками в пространстве вьюпорта. Всё, что неизвестно в уравнении, это параметры конкретного шрифта, влияющие на ширину. Количество внутренних box-ов, размер кегля, количество символов + пробелы, плавающие параметры площадок глифов, трекинг, кернинг и проч. нюансы. Так дадим чуть больше воздуха, используем хаки, типа align center. В целом, не включая перфекционизм, с VW VH можно жить. Реально злой минус -- это поддержка технологии в старых версиях браузеров

[Antony Bark]

ps ищем: Fluid Font Sizes

см. https://css-tricks.com/snippets/css/fluid-typography/
след. - https://blog.typekit.com/2016/08/17/flexible-typog...
см. https://open-props.style/#typography , раздел Fluid Font Sizes *

* вообще, ребята славно поработали в направлении стандартизации CSS

[Antony Bark]

Semantic.Moscow, шагом выше привёл путь, гляньте

Answer 2

[Semantic.Moscow]

font-size-adjust наверное?

но это такое себе, странное.

ну нет, точно нет.

Comments

[Иван Гришов]

это другое что-то, с начертаниями шрифтов связано

[Semantic.Moscow]

есть такая фишка, называется window.getComputedStyle
можно вытягивать значения через getPropertyValue

остаётся только получить overflow: scroll и менять шрифт пока scrool не пропадёт.

[Олег Барабанов]

Semantic.Moscow, несколько похожее решение (с похожим принципом) как-раз представил в своем ответе.

Answer 3

[Олег Барабанов]

На похожий вопрос я уже отвечал на stackoverflow, поэтому чтобы не дублировать просто дам ссылку на свой ответ c пояснением и примером кода.

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

Если вкратце, то текст в блоке оборачивается дополнительным контейнером с overflow: hidden под размер блока и враппером, который просто оборачивает текст. Взяв огромный размер шрифта (так, чтобы враппер переполнял контейнер) и затем уменьшая его, мы уменьшаем размеры враппера и как только этот враппер перестает переполнять контейнер - убираем все лишнее(и контейнер и враппер) и оставляем подобранный размер. Данный пример похож на тот, что упоминал Semantic.Moscow, с расчетом размера шрифта за счет overflow: scroll и снижения размера шрифта до тех пор, пока скролл не пропадет.

Решение не самое лучшее, но возможно оно вам поможет.