I’m currently working on a React project where I’m using Fitty to dynamically resize text to fit its container. The library works well for shorter text like “AAAAAAA” or “AAA AAA A AAA,” but I’ve encountered an issue with very long words.
When the window width exceeds the initial size at which Fitty was applied, the code removes Fitty, assuming it’s no longer needed. However, this causes issues with very long words that fail to wrap correctly:
Fitty adjusts the text size based on the starting window width (e.g., 1200px) and stores it as initialWidth (a local variable).
When the window width exceeds initialWidth (e.g., resized to 1400px), Fitty is removed, and the text reverts to its original size, causing overflow and breaking the layout.
This is particularly problematic for long words like “AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA”, which fail to wrap correctly.
I’ve attempted removing Fitty when the window width increases beyond initialWidth. However, removing Fitty causes text overflow for longer words.
I experimented with checking initialWidth to reapply Fitty, but the solution doesn’t address cases where text still overflows after Fitty is removed.