shuding / react-wrap-balancer

Simple React Component That Makes Titles More Readable
https://react-wrap-balancer.vercel.app
MIT License
3.98k stars 66 forks source link

Fix incorrect width computation for text that can't wrap #57

Closed TomerAberbach closed 1 year ago

TomerAberbach commented 1 year ago

Some reproductions of the issue: https://codesandbox.io/s/react-wrap-balancer-bug-ubbizi

The problem is that if the text can't wrap, the container's height will never change as we shrink the wrapper. So we keep shrinking the wrapper, never observe a height change, and end up with a width lower than the minimum required to not overflow the container.

I solved it by making sure lower is no less than the minimum width necessary to fit the contents (see scrollWidth documentation).

Ideally you wouldn't give react-wrap-balancer text that can't wrap in the first place, but sometimes you're getting arbitrary titles from somewhere and you don't know if they are single words or have non-breaking spaces so we should probably handle this case in the package.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-wrap-balancer ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 1, 2023 2:47am