<p>Your browswer does not support <code>text-wrap: balance</code></p>

<h1 class="unbalanced">This is a somewhat long title with text that you might or might not know beforehand.</h1>

<h1 class="balanced">This is a somewhat long title with text that you might or might not know beforehand.</h1>

@supports (text-wrap: balance) {
  p {
    display: none;
  }
}

p {
  font-size: 2rem;
  border: 3px solid red;
  padding: 0.25em;
  font-weight: 900;
}

.unbalanced,
.balanced {
  padding: 10px;
  border: 2px solid;
  animation: 10s linear 1s infinite alternate squeeze;
}

.unbalanced {
  border-color: red;
}

.balanced {
  border-color: green;
}

@keyframes squeeze {
  from { max-width: 100vw; }
  to { max-width: 20ch; }
}

.balanced {
  text-wrap: balance;
}