The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

min-content - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

Simple React Component That Makes Titles More Readable

React Wrap Balancer

It’s a nightmare. I remember hating this while working on Paper and I do not remember the engineering magic that got it to work 😭

i have such a niche help request but… has anyone ever worked on chat-bubble text-wrapping? I’m trying to figure out the rules how iMessage wraps text tightly around its bubbles—it’s not just max-width and sometime the second line of a bubble is longer than the first!

Nah it’s some magic for sure. I spent a solid hour trying to figure it out a couple weeks ago for my own app and ended up totally confused, and just settled on max-width.

Is this on the web? If so have you tried using `min-content` in combination with max width? I’m on my phone but `width: min-content; max-width: 100%;` might do it

https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

Commenting to sub to this. Someone reveal the secrets please.

I wonder if they use something like this to balance line length. https://react-wrap-balancer.vercel.app/

hmm sharing what @andy posted and adding that I wonder if iMessage is somehow doing this balancer thing with ideal-width and max-width on frames? (I’m just hearing ideal width for the first time as an iOS term) https://react-wrap-balancer.vercel.app/

I thought maybe the first line’s break point was maybe being used to define max-width for subsequent lines text wrapping, but that still creates large rags!

Posts