Why does the splitted node from SplitText includes extra whiteSpace Note only the node which is next <br> Tag.

[Jim Tim]

hello guys i'm stuck with this bug.
i'll explain the scenario.

I'm trying to perform word by word animation.

 

1. in the output I want that white space so I added white-space: pre-wrap property.
the output : with the space I expected.

 

2. but if alter the container using splitText it give some minor extra-space how to prevent. you can notice by the width difference.

 

3. if you uncomment the width you'll face overflow wrap issue due to that minor extra space.

See the Pen XWybLjZ by dajeme7838- (@dajeme7838-) on CodePen

[Rodrigo]

Hi,

 

This is because you are using a regular space. It's fixed when you use   instead:

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

 

Also just in case is a good idea to wait for the fonts to be ready before creating your SplitText instances:

document.fonts.ready.then(function () {
  // Create SplitText instances
});

 

Hopefully this helps.

Happy Tweening!

[Jim Tim]

@Rodrigo this does fix the issue. but in your solution, you are using &nbsp; only in the space after <br> tag.

 in my useCase the text content is dynamic I can't know what the user entered.

 check out this code-pen output. 

See the Pen qBQOaGa by dajeme7838- (@dajeme7838-) on CodePen

  if I use &nbsp; in all the spaces the splittext is unable to split the text by words instead it splits by line
 

[GreenSock]

Sorry about the delay, @Jim Tim. I've improved the next release of SplitText to accommodate this scenario - does this work better for you? 

See the Pen dyaOOdQ?editors=0010 by GreenSock (@GreenSock) on CodePen