Chris Cooper
GitHubLinkedIn

Text wrap: balance

  • css
  • When text wraps onto more than one line, using this text-wrap property more evenly balances how much text appears on each line
  • Probably best to be used with headers
  • Limited to six lines max due to extra performance cost

Text wrap balance vs unbalanced

Usage

<h1 style="text-wrap: balance; max-inline-size: 60ch;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>