Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hmontelongo

SplitText puts <span> into a div and breaks text

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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?

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×