{"id":4294,"date":"2024-10-31T17:33:58","date_gmt":"2024-10-31T22:33:58","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4294"},"modified":"2024-11-01T10:25:05","modified_gmt":"2024-11-01T15:25:05","slug":"edge-to-edge-text","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/edge-to-edge-text\/","title":{"rendered":"Edge to Edge Text"},"content":{"rendered":"\n

I kid you not: Roman Komarov’s Fit-to-Width Text<\/a> is one of my favorite CSS tricks I’ve ever seen. It’s, uh, quite a treat (that’s all you’re going to get here on Halloween, sorry). It’s just so strange.<\/em> The end result is that you can size a line of text such that it hits the left and right edge of a container perfectly. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

This is a very legitimate need that people have been solving for ages. If the container is a fixed size, you can solve it by setting ultra specific font sizes. But more likely these days, containers are of unknown widths, leaving us to JavaScript for figuring out how big of text we can fit in there. FitText<\/a> was a seminal example. These days, we can also do it with container units<\/a>, but it’s still extremely fiddly. Wouldn’t it be nice to be like font-size: make-it-fit;<\/code>? <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Roman’s trick is as close to that as can be. Check out his post<\/a> for all the details, but the core concept is that it uses scroll-driven animations. The text gets set pretty big<\/em> by default, then a scroll-driven animation is set on it which runs scales the text down <\/em>essentially until animation-range: entry-crossing;<\/code> is fulfilled then stops. Here’s an example with just one word (free free to resize and see):<\/p>\n\n\n\n