RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G IconYouTube Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Fit width text in 1 line of CSS:

h1 {
  text-grow: per-line scale;
}

Prototype available in Canary 145+

Codepen · CSSWG · Explainer · Prior Art

29 comments #

286likes
56reposts
  • netop://ウィビ
  • Paul Shryock
  • John Allsopp
  • Simeon.__proto__
  • Martin Grubinger
  • Anthony ꙮ Cregan
  • Honza Javorek
  • Ricardo Machado
  • Krzysztof Hankiewicz
  • Bundyo
  • Emmie Päivärinta
  • Necrite
  • nichoth
  • Dan Burzo
  • Chris Armstrong
  • Web Witch ???? Stephanie Stimac
  • Chris Hayes
  • magrolino
  • Zacky Ma
  • Yash Raj
  • Nilesh Prajapati
  • Typesetting
  • Emanuel Saramago
  • Zach Leatherman
  • Iron Orchid
  • Rick
  • Brian Kardell
  • Ryan Mulligan
  • Brad Frost
  • Ben Holmen
  • cookie.gingerbread ????
  • Sangeeth Sudheer
  • mORA
  • Louis Maddox
  • Kevin Powell
  • Michael
  • Cathal
  • amos
  • Cassidy
  • zetashift
  • Mustafa Kurtuldu
  • Riya
  • Toby Evans
  • *mario 64 boo noise*
  • Munawwar Firoz
  • MOON
  • Sam Littlefair
  • Marisa
  • Alena Nikolaeva
  • Jay
  • David Aerne
  • Jon
  • Brecht De Ruyte
  • Nicolas Dubien
  • Daniel Schwarz
  • Philip Jägenstedt

Join the conversation on

Finally time to put Fitty to rest rikschennink.github.io/fitty/
Rik SchenninkRik Schennink
Can we set the maximum number of characters per line length?. Do you have any links to the spec please?
Dean LeighDean Leigh
an explainer holds the latest details github.com/explainers-b... room for comments too. the CSSWG is a good place to jump in also, link to that is in the blog note
Adam ArgyleAdam Argyle
Oddly the link on mobile just took me to github home (works on desktop). I was wondering if we could set min, clamp, max characters (maybe using ch units?) to achieve ideal line lengths.
Dean LeighDean Leigh
You mean Canary 145+?
Boğaç GüvenBoğaç Güven
So like the titles on nmn.sh but without SVG and manual ratio calculations? That would be nice. I also like that it can re-flow text unlike the trick by Kizu with nested containers.
NmnNmn
I need this ????
Sam RoseSam Rose
Until then... <fit-text>Hello Web Components</fit-text> fit-text.github.io 566 Bytes gzipped
Danny Engelman ????????️????️Danny Engelman ????????️????️
* in 1-2 years
IljaIlja
this was one of my very first jquery plugins! absolutely love that it’s making it into CSS!
Zach LeathermanZach Leatherman
you can def use clamp, and you can def set the max-inline-size using ch units… which _feels_ like the ingredients for achieving ideal line lengths
Adam ArgyleAdam Argyle
yep… ????
Adam ArgyleAdam Argyle
AT LAST
CassidyCassidy
What real-word application would this have? I can see it working with a design where static text elements need to fit an entire space relative to the design. Which is huge. Anything else? I’m not creative.
Not A SloadNot A Sload
yep, a design tool can offer it to make nice headlines or templates can use it numbers can fit into circles so that like "20" and "100" both work (that 3rd digit can be a doozy) grids and alignment being perfect fitting user generated content into spaces without using an ellipsis
Adam ArgyleAdam Argyle
there's an art project in here somewhere, i can feel it
MarisaMarisa
Does this play nicely with developer.mozilla.org/en-US/docs/W... ? (Please say it does ????)
Ale MuñozAle Muñoz
Every single type specimen website
Olex Ponomarenko ????????Olex Ponomarenko ????????
Is this a CSS standard?
Fatih AltinokFatih Altinok
Just saw the CSSWG draft
Fatih AltinokFatih Altinok