title: Split a string by word and detect/include line breaks
body: <p>In order to animate headings word by word, I'm trying to split a string by space, but the CMS I use returns line breaks as <code>\n</code> inside of the string.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const text = "Aenean non odio erat.\n Suspendisse vestibulum vulputate nulla et mollis."
  
  const splitText = (text) =&gt; {
      const words = text.split(' ')
      return words
  }
  
  console.log(splitText(text))</code></pre>
  </div>
  </div>
  </p>
  <p>Using this code, I get this result:</p>
  <pre><code>[
    &quot;Aenean&quot;,
    &quot;non&quot;,
    &quot;odio&quot;,
    &quot;erat.\n&quot;,
    ...
  ]
  
  </code></pre>
  <p>How to split the string by word but <strong>keep including and visually show</strong> (maybe with CSS using <code>white-space: wrap;</code> or <code>pre-wrap</code>) the line breaks?</p>