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 165

Codepen · CSSWG · Explainer · Prior Art

12 comments #

110likes
21reposts
  • 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

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 ????????️????️