Font size
adjusts to the width of the
parent
element regardless of existing
style or width
* Some restrictions may apply, see documentation for details. Russell Chapman is not liable for any damages due to implementing this in a production environment.
My fit text method
There are many ways to fix text to the width of the parent. The first option from this CSS Tricks article fitting text to a container recommends using viewport units and a magic number to fit text in a container. The problem is, finding this magic number. My solution involves measuring the text width at a few font sizes on a hidden HTML5 canvas. Those sample measurements are fed into a JS-Polynomial-Regression model which can then predict the font-size for any width container. After getting the predicted font-size; it is clamped to min/max sizes, converted to vw viewport units, and applied to the elements' style.
Font size can be predicted with as few as 3 sample measurements which is insanely fast compared to my first approach of measuring text widths while recursively increasing the font-size until they fit. It's not exact (especially on resize), but the fluid vw units are close enough. It’s a trade-off of simplicity vs. accuracy. I've not found any JS library that implements this method, so I may build an NPM package out of it to share with the world.
CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations