Splt is breaking words onto new lines

[powen-cs]

Noticed that when splitting by character, it splits words onto a new line mid-way, so a long word like:

characteristics

becomes:

characte
ristics

... if there's no room on the line the text is sitting on. Is there a way to prevent this such as the CSS equivalent of text-wrapping?

[powen-cs]

PS also does it on your demo

[dekaSW]

I eventually came up with my own solution to prepare text for splt and separating those in lines and words to accomodate for custom styling in order to prevent word breaks and set line breaks accordingly again.

Prepare your content with this little helper, assuming a DOM node as content source:
<div id="my-custom-node">My bold<br>multiline headline</div>

Here, I used <br> tags as separators. But we could split by custom chars as well.

splitUpText(document.querySelector('#my-custom-node'))

splt({
  reveal: true
});

function splitUpText(el, marker = '<br>') {

  if (!el) return

  const lines = el.innerHTML.split(marker)
  const words = lines.map(line => {
    return line.trim().split(' ') 
  })

  const result = words.reduce((result, item) => {
    
    let line = item;
    if (Array.isArray(item)) {
      line = item.reduce((result, item) => {
        return result + '<span class="splt">'+item+'</span> '   // add splt class and a whitespace
      }, '')
    }
    return result + '<span class="line-item">'+line+'</span>'
  }, '')

  el.innerHTML = result
}

Then use some CSS to make it look nice again:

.line-item { display: block; overflow: hidden; } .splt { white-space: nowrap; }