Shrinkwrap showdown mix-up

Shrinkwrapping has been a hobby of mine lately. I actually just created a package for Android for this called [ShrinkWrapText](https://github.com/Janneman84/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](https://codepen.io/web-dot-dev/pen/KKxjpQm).

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.

Start from the Shrinkwrap showdown demo and inspect how its explanatory text presents the two concepts described in the issue. Separate fitting text within a block from changing line wrapping with text-wrap: balance or pretty; the work is done when the demo clearly distinguishes these behaviors and its claims match the examples.

Written by the indexing model from the issue text.