search

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

span too narrow when content has one word per line #68

Closed nagman closed 1 year ago

nagman commented 1 year ago

I've noticed that when the parent wrapper is too narrow to display more than one word per line, the balancer resizes to less than the min-content width:

image image

When the text is left aligned (like the first image), that's not a problem, but when it is centered, this messes up the layout (as on the second image).

nagman commented 1 year ago

I've then tried to reproduce the bug on the plugin website, and I've noticed that it was combined with word-break: break-word, which kinda "solves" the issue (yet I don't know which black magic is involved).

The only remaining issue due to this technique is that the words will be split on several lines if they are too long. But that's ok for me.