Jump to content
Search Community

SplitText 'lines' removes <br> tags

Aaron Robb test
Moderator Tag

Recommended Posts

Is there a way around the splitText setup with "type: "lines"" to ensure it doesn't remove line breaks (<br>) when the content is wrapped in a <p>??

When using "words" or "chars" it keeps the breaks as they are, but when "lines" is selected, it removes those breaks and doesn't create new lines for them. It seems to use the outer <p> tags as what it sees as breaks, even if there is a <br> inside.

Link to comment
Share on other sites

  • 9 months later...

The SplitText - lines issue I'm having is when I need a forced line break inside of a style tag.

Quote

In an industry that’s often seen astransactional, temporary, and rigid, we’re focused on <b>doing<br>things</b> differently.

This keeps "Doing Things" bold but on one line.

A work-around is <b>doing</b><br><b>things</b> but that's annoying :)

 

(why am I a newebie? I've been using Greensock for 10+ years)

Link to comment
Share on other sites

Yeah, that's just a fundamental challenge with breaking things apart by lines when you've got NESTED elements. It's simply impossible to accommodate cleanly. Imagine you've got a <b id="myBold">some<br>words</b> and you do this: 

let myEl = document.querySelector("#myBold");

But then you ask SplitText to split by lines...uh oh, now you've got ONE nested element (#myBold) that is on MULTIPLE lines! How can two <div> elements (the lines) both contain a single element? They can't. Even if we added a bunch of code to SplitText to try to create a bunch of copies (one for each line), that's not a good solution because you lose the reference (myEl in the code above) and there are a bunch of other potential pitfalls too like illegal duplicate id attributes, potential CSS styles that no longer work when the selector changes, spacing problems introduced by using multiple elements instead of one, etc., etc.

 

I really wish I had a silver bullet for you. 

 

Thanks for being a Club GreenSock member! 💚

  • Like 1
Link to comment
Share on other sites

4 minutes ago, Michael Barsotti said:

Thank you for explaining that, this make perfect sense. 

In all the years I've been using gsap (back to TweenMax for .as) I've found elegant GreenSock solutions to everything I've wanted to do. 

Aw, that means a lot. Thanks so much for the kind words. And it's lovely to hear that you've been such a long-time user. 🙌

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...