Как делать размер шрифта относительно размера родителя?

Question

[ilovemaryjane]

Не уверен что есть решение на чистом CSS...Либо что вообще есть решение!

Вообщем, представим дивы, размером, условно, 500 px. В каждом из дивов есть текст, слова. Слова разной длины и проблема именно в этом.

Нужно чтобы каждое слово занимало весь див. Т.е. слово Вася должно занимать весь див, и слово Эйяфьятлайокудль должно занимать весь див. Один и тот же размер шрифта соответсвенно я не могу поставить. Есть ли какая-то эзотерическая CSS величина, которая мне может помочь? Или calc? Или на JS как вычислить размер шрифта чтоб его заинлайнить? Как решить эту проблему?

Answer 1

[spnq]

Можно попробовать каждое слово пихнуть в <p> и добить в css:

p {
  text-align: justify;
  font-size: 5.5vw;
}

p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

vw это viewport width, т.е. ширина экрана пользователя, в данном случае размер текста будет равен 5.5% от ширины экрана.
Но для таких вещей уже есть готовые библиотеки, например fittextjs.com

Comments

[ilovemaryjane]

Там каждое слово и так уже в span)) А вот Fittext похоже то что нужно.

Answer 2

[Дмитрий Кузнецов]

Не пробовал данную реализацию, но может додумаете за меня:
Представим что блок у нас состоит в таком стиле:

.card>.card-header>.text>Lorem2^^.card-body>lorem100

Попробуйте в CSS добавить что-то такое:

.card-header > .text {
   font-size: 100%;
}

Answer 3

[Сергей]

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