Split Text doesn't split by line correctly (nested tags)

[Heo]

Problem:

SplitText doesn't split by lines, when I have nested tag in it.

 

 

 

 

See the Pen xbGeRMM by lovesossa (@lovesossa) on CodePen.

[mvaneijgen]

Hi @Heo welcome to the forum! 

 

Your .h2 is not the parent element of the text, I you split on the <p> which is the parent element with all the text it works as expected. 

 

Hope it helps and happy tweening! 

 

See the Pen pvJBRjV by mvaneijgen (@mvaneijgen) on CodePen.

[Heo]

@mvaneijgen

 

Oh, I see, thank you very much.

I think there should be automatic detection of nested tags, as there can be any number of <p> from CMS

 

[Rodrigo]

Yeah that's a little bit more tricky actually because of where you stop looking for nested elements. In your demo, for example, you have a nested <em> inside the element you want to split, but how should SplitText know where to stop? See the problem? This could mean that in similar cases (like yours) users could complain: "I didn't wanted for SplitText to do that and split what's inside the <em> or <strong> tags". Finding a way to achieve all of that could be expensive in terms of KB and is not something that is widely requested by users. If there is enough traction for it we could evaluate adding it, but in the short/mid term there are no plans for it.

 

Finally, regardless using a CMS or coding the HTML directly, is always a good idea to have the biggest possible control over the HTML structure in order to be able to point for the target elements with a selector as specific as possible.

 

Happy Tweening!