SplitText not respecting \n for line breaks

[Tagliavia]

Hi everyone

I have some text that comes from i18n and has \n to break the text in different lines.

 

When using split text it is all appearing in a single line.

Any work around would be kindly appreciated

[PointC]

Have you tried this in your CSS?

white-space: pre-line

 

[Tagliavia]

Thanks for the reply sir, yes in fact that what i find odd the whitespace pre-line is present

[PointC]

hmmm... I just did a little test. It seems innerText adds the <br> tags for you while innerHTML needs the CSS pre-line. All looks correct until I go to split the text and then the lines don't seem to work on the innerHTML version. I don't know if this is the intended behavior or not. Maybe @GreenSock can offer some more details. Until then, innerText seems to work just fine.

 

See the Pen 90742f069e3137f50676319a4a3517d8 by PointC (@PointC) on CodePen

[Tagliavia]

Thanks lets see if we can get more info about it.

[GreenSock]

9 hours ago, PointC said:

hmmm... I just did a little test. It seems innerText adds the <br> tags for you while innerHTML needs the CSS pre-line. All looks correct until I go to split the text and then the lines don't seem to work on the innerHTML version. I don't know if this is the intended behavior or not. Maybe @GreenSock can offer some more details. Until then, innerText seems to work just fine.

Yes, SplitText isn't intended to support that since there are plenty of line breaks in HTML that shouldn't be interpreted as <br>, but since SplitText does respect <br> tags you can do a simple replace before splitting (if you don't want to use innerText, which is probably the cleanest solution): 

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

[PointC]

Well there you go @Tagliavia. You can use a replace or maybe innerText so the replace is automatic. 

 

Happy splitting.