<video style="display: none" src="/media/text-grow.mp4" alt="some title" height="1134" width="1512  " />
 Fit width text in 1 line of CSS:
<pre><code class="language-css"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0"><code>h1 {
 text-grow: per-line scale;
}</code></pre>
</code></pre>
Prototype available in Canary 145+
<a href="https://codepen.io/argyleink/pen/gbrBVJG">Codepen</a> · <a href="https://github.com/w3c/csswg-drafts/issues/2528">CSSWG</a> · <a href="https://github.com/explainers-by-googlers/css-fit-text/blob/main/README.md">Explainer</a> · <a href="https://kizu.dev/fit-to-width/">Prior Art</a>

Fit width text in 1 line of CSS: h1 { text-grow: per-line scale; } Prototype available in Canary 145+ Codepen · CSSWG · Explainer · Prior Art

Fit width text in 1 line of CSS:
h1 {
 text-grow: per-line scale;
}

Prototype available in Canary 145+
<a href="https://codepen.io/argyleink/pen/gbrBVJG" rel="noopener noreferrer">Codepen</a> · <a href="https://github.com/w3c/csswg-drafts/issues/2528" rel="noopener noreferrer">CSSWG</a> · <a href="https://github.com/explainers-by-googlers/css-fit-text/blob/main/README.md" rel="noopener noreferrer">Explainer</a> · <a href="https://kizu.dev/fit-to-width/" rel="noopener noreferrer">Prior Art</a>

CSS Text Grow

RSS Feed for Adam Argyle: Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.

RSS Feed for Adam Argyle: Web design &amp; development tips &amp; tricks: CSS, JS, HTML, Design, &amp; UX.

Share CSS Text Grow

Sign up to save your podcasts

CSS Text Grow

CSS Text Grow