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

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>