Jump to content
Search Community

Bug: SplitText.revert() removes trailing <br> tags

pakl test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

That codepen is linking to a year old version of SplitText, although I'm not sure if this has been subsequently fixed.


The description of the bug isn't quite accurate, although the different result certainly exists. It appears that SplitText is adding a phantom space after a trailing <br/> which gives the appearance of an extra, empty line, but reverting it is actually restoring the exact original HTML without this phantom. It can also be seen by including a <br/> surrounded by white space in the middle of text.

Link to comment
Share on other sites


As Jamie I can't see an issue in this one regarding the <br> tag. I tested your codepen using the latest version 0.2.4 and it reverts correctly.


A suggestion would be to eliminate all the white space before and after the <br> tag in order to prevent extra lines in the resulting text or use position:"absolute" in the splitText config object.


I forked your codepen:


See the Pen tzuKk?editors=101 by rhernando (@rhernando) on CodePen

Link to comment
Share on other sites

To clarify, I agree there is probably a small bug here - if you add a single space on one side of a <br/> tag it will add an extra line break that's not there in the original HTML - effectively a double <br/> where only one should exist.

Yep, and using position:"absolute" solves that particular issue. The issue is that splitText adds an extra <div> tag to replace that space before and/or after the <br> tag, thus creating the extra line(s).

Link to comment
Share on other sites

Ahh, silly me, in the splitText config object, not the CSS.

var mySplitText = new SplitText("#quote", {type:"lines,words,chars", position:"absolute"});

In this case the solution to the issue has to do with the position of the extra <div> element, since is now absolute it's removed from the document's flow, but the extra element is still there. Without passing position:"absolute", the <div> element has a position:relative in it's inline style and a child element (also a <div> tag with position:relative) that causes the extra line. If the child element is either removed or it's position is set to absolute, the issue is solved as well.

Link to comment
Share on other sites

  • Solution

Hey Guys,


Thanks for the assist. This ended up being an issue that needed fixing in SplitText.




It appears your original pen is now loading the fixed version. Let us know if you have any other problems.

Sorry for the inconvenience.



  • Like 3
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.
  • Create New...