Jump to content
Search Community

SplitText Not Seeing <br> Tags And Creates Odd Layouts In Confined Spaces

jchensor test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello!

I've recently started to use SplitText and it's very cool. However, I'm finding some odd behavior in it, and I'm wondering if I could get some help.

In the attached file, if you unzip it and just load "topics.html", you'll notice that at one part, "weprocess" shows up on the screen. In the "topics.js" file found in the "js" folder, the text I have written has a "<br>" tag in between the two words. So SplitText isn't processing it normally as I have seen in all the sample Codepens. And I haven't been able to reproduce it properly in the Codepens either. Not only that, but if you uncomment the single line in the "revert" function where I call "mySplitText.revert()", the <br> is read properly after revert takes effect. (Note: I'm using Chrome to view the html file currently on a Windows X machine.)

Also, the way I have the text set up is in a very defined space. But when the text gets too long to fit in there, SplitText starts to do some crazy things to the format display. All you need to do to see this is, in the "topics.js" file, comment out the first "var topicDetail" line and uncomment out the second one right under it and refresh "topics.html" in the browser. When the line is particularly long, the format gets completely dismantled.

I'm not sure what it is that I'm doing that makes it all behave incorrectly. But any help would be appreciated! Thanks!

 

Edited to add: It *probably* has to do with the fact that I am setting the html text and re-pulling it via the js file. While this seems redundant, for the purposes of what I'm trying to accomplish, this is a necessary step so I can't avoid doing this.


- James

 

Link to comment
Share on other sites

Hey James. Please do not share unrestricted Club GreenSock plugins with people. I went ahead and deleted your ZIP file because you did that. That's part of the reason why we ask that people create minimal demos using CodePen - because the Club GreenSock plugins that are available on CodePen are the restricted versions so that people can't get the Club GreenSock plugins for their projects for free :) I understand that you didn't mean to and no harm done - just letting you know for the future.

 

I created a CodePen version of your demo:

See the Pen QWKzNby by GreenSock (@GreenSock) on CodePen

 

We'll look into the issue now :) 

  • Like 2
Link to comment
Share on other sites

Ah, yes, I see. Okay. Removing the flex does fix the <br> tag problem.

The reason for using the "flex" option was to make sure the text was always centered vertically regardless of how many lines the text is, because for my purposes I don't actually ever know how many lines that display is gonna be. Using the "flex" option was the only solution I had found that worked for me so that the text will always be vertically centered dynamically with one line, two lines, three lines, etc. Removing it makes it so that text is always at the top of the graphic in the original zip file (or the top of the css bounding box width and height).

Obviously, centering the text vertically isn't your problem, though. LOL! I'll have to see if I can an alternate solution that supports both. But at least I know why this is happening with the Greensock portion!

Thank you very much!

- James

Link to comment
Share on other sites

  • Solution
12 minutes ago, jchensor said:

I'll have to see if I can an alternate solution that supports both. But at least I know why this is happening with the Greensock portion!

Maybe you could wrap it in a container <div>, so you split stuff inside that but the wrapper (outside that container) is flex. Or you could use techniques listed at https://css-tricks.com/centering-css-complete-guide/

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

6 minutes ago, GreenSock said:

Maybe you could wrap it in a container <div>, so you split stuff inside that but the wrapper (outside that container) is flex.

You, sir, are my hero.

Totally worked. Created a flex container and kept it separate from the text, and now I get the line breaks AND the self-vertical-centering.

Thank you so much!

 

  • Like 1
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...