Текст в ширину экрана

Строка сама подбирает кегль, чтобы занять ровно 100% ширины — компонент FitText.

Потяните ширину окна браузера.

ШИРИНА РОВНО ПО ЭКРАНУ ЛЮБОЙ ТЕКСТ

Каждая строка сама подбирает кегль под ширину контейнера — потяните окно браузера. У Joby это компонент FitText.

Код

<h1 data-fittext>ЗАГОЛОВОК В ШИРИНУ</h1>

<script>
function fit(el) {
  el.style.fontSize = "100px";            // эталонный замер
  var w = el.scrollWidth;
  var target = el.parentElement.clientWidth;
  el.style.fontSize = (100 * target / w) + "px";
}
var els = document.querySelectorAll("[data-fittext]");
function fitAll() { els.forEach(fit); }
addEventListener("resize", fitAll);
fitAll();
</script>

<style>
[data-fittext] { display: block; white-space: nowrap;
  line-height: .92; letter-spacing: -.03em; font-weight: 800; }
</style>

Промпт для ИИ

Сделай FitText как на jobyaviation.com: заголовок всегда занимает ровно 100% ширины контейнера. Механика: выставить эталонный font-size 100px, замерить scrollWidth, затем font-size = 100px * ширина_контейнера / замер. Пересчитывать на resize. Элементу display:block, white-space:nowrap, line-height 0.92, letter-spacing -0.03em. Работает с любым текстом и шириной.