SplitText puts <span> into a div and breaks text

[BC Development 8 Likes (Newbie)]

I have this issue with SplitText where the text inside a <span> is breaking into another line and I have no idea how to fix it.

According to the docs they spans shouldn't be a problem, but I don't know what is causing this

 

In my example, the  "this is the THIRD line" should be on the same line

See the Pen mdmBmyp?editors=1010 by godhandkiller (@godhandkiller) on CodePen

[GreenSock 18,267 Likes (Superhero)]

The algorithm that SplitText uses to discern when it's a different line looks at the y position of the resulting <div> elements and you've got text inside your <span> that's a very different font size which makes it shift beyond the threshold to be considered not on the same line. The solution is simple - by default lineThreshold is 0.2 which means 20% of the font-size is where it breaks, so you can just set lineThreshold: 0.5 or something like that instead.

lineThreshold: 0.5

I also simplified some of your code: 

See the Pen PomJmvg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better?

[BC Development 8 Likes (Newbie)]

1 hour ago, GreenSock said:

The algorithm that SplitText uses to discern when it's a different line looks at the y position of the resulting <div> elements and you've got text inside your <span> that's a very different font size which makes it shift beyond the threshold to be considered not on the same line. The solution is simple - by default lineThreshold is 0.2 which means 20% of the font-size is where it breaks, so you can just set lineThreshold: 0.5 or something like that instead.

lineThreshold: 0.5

I also simplified some of your code: 

 

 

 

Better?

Thank you! Little mad that this is not documentation but thank you for the help! I actually had to put it on 0.9 in my real project since the font is going to be much bigger than the example, but it still works!