Control line break to make lines equal width

Question

If an h1 is too long to fit in one line and wraps to the next line, I want those two lines to be roughly the same width. I have searched all over for a CSS solution to this, with no luck.

Is it really true that this is not possible with CSS? It seems like such a simple thing that would be useful in so many instances, so I'm really puzzled that this appearantly can't be done with CSS.

Can anyone recommend some kind of workaround, or what the next best thing might be?

Just to be clear, this is what I mean:

Here is a headline that's too long to fit on a single line, so it wraps to the next line of text

What I want is this:

Here is a headline that's too long to fit on a

single line, so it wraps to the next line of text

Answer 1

There is a CSS property called text-wrap: balance that do exactly what you want. This is quite new so I'll consider checking the browser compatibility before using it.

See documentation here : https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#result

Answer 2

You can try playing with a max-width and word-break. Note that if you use word-break: all maybe create some hyphenation error.

Two examples:

.example-1 {
  max-width: 610px; 
  width: 800px;
  word-break: break-word;
}

.example-2 {
  max-width: 610px; 
  width: 800px;
  word-break: break-all;
}

<div class="example-1">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>

<div class="example-2">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>