Break line on white space between words

Question

Is it possible to break line on white space and place the next word on a new line?

In the following example the result should look like the second title :

.test{
  text-align:center;
}
h1{  
  display:inline-block;
}
span{
   position:relative;
   top:50px;
   right:45px;
}

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

Is it possible to break lines on each white space?

Answer 1

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>

Answer 2

• 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>

Answer 3

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;
}