A "text-wrap: balance" fallback approach

Here is a workaround for when you want to use text-wrap: balance but must also render nicely for browsers that don't support it Show archive.org snapshot (mostly Safari <17.5).

Step 1: Put some <br>s into your HTML

First, place explicit line breaks that should work for most cases.
This depends on your use case and is affected by e.g. container widths or user content.

Copy<div class="my-element">
  <p>
    Average score
    <br>
    last month
  </p>
</div>

Step 2: Hide those <br>s when you can balance text

We now can say "if an element contains <br>s, ignore them, but apply text-wrap: balance".
Example:

Copy@supports (text-wrap: balance) {
  .my-element *:has(> br) {
    text-wrap: balance
  }
  .my-element *:has(> br) br {
    display: none
  }
}

I strongly suggest you apply this only in the context of specific selectors and not as a global rule, to avoid undesired side effects on other components, and to not impact render performance.