Break line on white space between words

• white-space: break-space;: break words at white space when necessary.
• width: min-content;: have width as the minimum content as possible.
• margin-left: auto; and margin-right: auto;: (optional) align to center.

.test{
  text-align:center;
  width: min-content;
  white-space: break-space;
  margin-left: auto;
  margin-right: auto;
}

<div class="test">
<h1>split this</h1>
</div>

You could use a very high value for the word-spacing property. It will break lines on each white space between words :

.test{
  text-align:center;
}
h1{
  word-spacing:9999px;
}

<div class="test">
<h1>split this</h1>
</div>

You could use word-wrap in your CSS to make sure your words are not cut out and are forced in the next line if the size of your content area doesn't fit in.

Like following:

h1 {
   word-wrap: break-word;
}

If you instead would break the word, no matter the point of break (causes the word to break from the point where it doesn't fit to the area anymore) you can use word-break.

h1 {
   word-break: break-all;
}