Jump to content
GreenSock

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

Split text removing spaces

Recommended Posts

Hi , I am trying to create a typewriter effect , but what i am facing is a issue where when i try to split text with 'chars' it automatically remove spaces and make it as one space for eg if i type "hi                                 greensock" , it changes it to "hi greensock" please check the following codepen, I need spaces to be in separate div because I need to get the cursor placed inside the seperate div

 

See the Pen BxbOZq by jeffin417 (@jeffin417) on CodePen

 

See the Pen aGMaJZ?editors=1010 by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

Thanks for the demo. SplitText isn't removing any spaces. This is just normal browser behavior. Only 1 space in your code will be honored. If you remove all the JavaScript you will see that there is only 1 space that gets recognized

 

HFTlB8

I don't think there is a SplitText solution for this. Someone else may have some suggestions. You may need to inject your own divs or spans with single spaces.

 

 

 

  • Like 4
Link to comment
Share on other sites

Hi, sorry for providing a wrong codepen , Please check the following , this is what i am trying to do for extra spaces , but the problem is i cant create seperate divs for empty spaces with splittext.

 

See the Pen BxbOZq by jeffin417 (@jeffin417) on CodePen

 

Link to comment
Share on other sites

Perhaps you could insert dummy text where the spaces are needed and wrap it in a span with visibility :hidden 

 

See the Pen gzEVJZ by Visual-Q (@Visual-Q) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Or just a simple <span> with a margin, like:

<div id="blueBox">hi<span style="margin-left:5em"></span>greensock</div>

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Or just a simple <span> with a margin

 

Cool, it's never occurred to me to give an empty span size.

  • Like 1
Link to comment
Share on other sites

11 hours ago, GreenSock said:

Or just a simple <span> with a margin, like:


<div id="blueBox">hi<span style="margin-left:5em"></span>greensock</div>

 

The problem is i am trying to do a typewrite effect when using the thing like you said , the cursor will consider it like a whole div rather than seperate div

Link to comment
Share on other sites

13 hours ago, anotheruser said:

The problem is i am trying to do a typewrite effect when using the thing like you said , the cursor will consider it like a whole div rather than seperate div

 

If you want a cursor to go over "empty" spaces and honour them as character positions then you could probably use the solution I suggested inserting text for the empty space but making it invisible. 

 

See the Pen gzEVJZ by Visual-Q (@Visual-Q) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false. :)

  • Like 1
  • Thanks 1
  • Haha 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false.

 

Hmmm... I guess it does pay to read the docs it's right there in black and white. DOH!

 

Probably worth noting empty whitespace is still collapsed like a browser, you have to put in non-breaking spaces (&nbsp's); to make reduceWhiteSpace:false  work.

 

Might be worth updating line in docs "By default, it is true which collapses white space characters into one, as most browsers typically do."

This seems to suggest empty whitespace is maintained with false. This is a bit misleading, empty whitespace still collapses like in browsers, non-breaking spaces are honored just like in browsers.

 

See the Pen jxoqaP by Visual-Q (@Visual-Q) on CodePen

 

Link to comment
Share on other sites

9 hours ago, GreenSock said:

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false. :)

I thought i clearly read the documentation , I am wrong , thanks man , Awesome answer as always 

 

BTW is that already present in the document? or added recently?

Link to comment
Share on other sites

I'm sure you did read the docs carefully... it wasn't there :) I added it recently. You're not crazy. 

  • Thanks 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.
×