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.
Posted by Arne Hartherz to makandra dev (2025-03-28 14:52)