Split text removing spaces

[anotheruser]

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

[Carl]

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

 

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.

 

 

 

[anotheruser]

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

 

[Visual-Q]

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

 

[GreenSock]

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

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

 

[Visual-Q]

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.

[anotheruser]

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

[Visual-Q]

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

 

[GreenSock]

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

[Visual-Q]

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

 

[GreenSock]

Fair point, thanks @Visual-Q

[anotheruser]

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?

[GreenSock]

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