Hug until container is too small

Have you tried max and min width sizes? This isn’t always the best but it does get the idea across in some cases.

Ugh, I currently have a requirement for this too!

In my case, I am making labels for the Y-axis of a chart. It would be easy except that on hover there is fill color, so the frame of the text needs to “hug” the text.

Some labels can be quite long though, so they need to wrap to fit in the “label gutter” container. That is, the frame magically needs to turn to “fill” when the “label gutter” container responsively narrows.

My work around is to have two variations of the component, one for short labels that don’t need to wrap, and one for long ones that do, But this only partially works for a defined range of container widths, where all the short labels never need to wrap, and all the long labels never need to hug.

Have you tried max and min width sizes? This isn’t always the best but it does get the idea across in some cases.

That is a good suggestion, but as you said not the best.

The problem with min-max widths as a workaround, is that it limits the reusability of the component. I could set the max width to the width of the current text, but then if we need to change the copy or use this in another area with different labels, then we would need the max width to change for each use case.