SplitText not honouring non-breaking space in text line

[kuba sanitrak_10501]

Hello, I am struggling with Splittext supporting nonbreaking spaces in headlines.
I found some forum posts referencing plugin not supporting nested elements, but that's (hopefully) not my case.

 

The issue with nonbreaking spaces (added manualy or by cms script) is language related - website main language is Czech, where preventing single letter preposition at the end of text line is common knowledge and not avoiding these is widely unacceptable.
I also made simple test by replacing "nbsp;" with "non-breaking hyphen" (⁠–⁠), which does not solve the issue, but proves the bug - hyphen gets honored and does not break the line layout.

Minimal demo (codepen) - identical markup, lime section using SplitText
 

See the Pen PwzBdWv by kubasanitrak (@kubasanitrak) on CodePen.

[GreenSock]

Have you tried setting reduceWhiteSpace: false? If you want to control where breaks happen, you could also consider using <br> tags. 

[Rodrigo]

Ahh... Jack beat me to it 😅 

3 minutes ago, GreenSock said:

Have you tried setting reduceWhiteSpace: false

 

I was fiddling with your demo and indeed using that option in your SplitText config solves it:

function revealHeadlineClaim() {
  let split;
  split = SplitText.create(".anim-baseline--intro", {
    // type: "words,lines",
    type: "lines",
    linesClass: "line++",
    autoSplit: true,
    mask: "lines",
    deepSlice: true,
    reduceWhiteSpace: false, // HERE
    onSplit: (self) => {
      split = gsap.from(self.lines, {
        duration: 1.25,
        yPercent: 100,
        opacity: 0,
        stagger: 0.1,
        ease: "power4.inOut",
      });
      return split;
    }
  });
}

Happy Tweening!

[kuba sanitrak_10501]

Amazing, this fixes the issue, thank you so much!