Shrinkwrap showdown mix-up

[Janneman84]

Shrinkwrapping has been a hobby of mine lately. I actually just created a package for Android for this called ShrinkWrapText.

Hence I checked your Shrinkwrap showdown demo with great interest. It looks great, but I do have a few comments about it. It seems the demo page mixes two different concepts into one. I'd like to see a clear distinction between the two:

1. If text doesn't fit on one line it gets wrapped. This causes the text block's width to max out. This often causes text blocks (like chat bubbles) to be too wide. Shrinkwrapping can address this issue, there is no css to do this. Native iOS apps shrink-wrap by default, Android does not (hence my package). Example:

2. The next level is to adjust the wrapping itself to distribute the text more evenly across the lines, which often reduces its total width. Unlike what the demo page says, there is css that can do this, namely text-wrap: balance and text-wrap: pretty (with some limitations). Example.

So 1 doesn't change the text wrapping, 2 does.

I'll play with it some more later and see how it deals with text with mixed alignments, which has some intricacies.

[sb3nder]

With CSS anchor positioning (which is nearly baseline, I believe), you can measure the text width and solve your first point.
Demo: https://codepen.io/sb3nder/full/GgjGWMv

For more complex stuff, there is a trick that uses CSS anchor positioning and scroll-driven animations:
w3c/csswg-drafts#191 (comment)