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.

<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:

@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.