split lines not working if target element contains comment nodes

[danielkorte]

The option types: 'lines' works in v0.2.5, but it is broken in 0.3.0 as far as I can tell. The wrapper HTML is created, but the actual text is not split between the wrappers.

[lukePeavey]

Can you reproduce this issue on codepen so I can take a look at your example?

The split lines feature is working in all of the examples in the storybook.

I've also created some animation examples on codepen using v0.3 and split lines was working.

[lukePeavey]

Storybook example: split lines only
https://lukepeavey.github.io/SplitType/?path=/story/tests-multi-line-text--split-lines

CodePen: split lines only
https://codepen.io/lukePeavey/pen/jOZgbqx

[danielkorte]

It seems to be a problem with comments within the text:
https://codepen.io/danielkorte/pen/LYQwpWV

[danielkorte]

In v0.2.5 it works but v0.3.0 does not work with comments.

[lukePeavey]

Oh interesting, I never tested that. I'll take a look

[lukePeavey]

Yes I see what you mean. It also adds an extra space at the beginning of the first line when text is split.

I'll see if I can fix this.

[lukePeavey]

@danielkorte PR #38 should fix this issue. I tested your CodePen using the new build, everything seems to be working now.

Your example also reminded me about another issue that needs some work : flexbox support.

Currently, when the target elements are inside a flex container, some specific styles are required to prevent the text from shifting around when it gets split.

When target element is inside a flex row: it needs to have a defined width or flex: 1

When target element is inside a flex column, it needs to have a defined width.

In your CodePen, adding width: 100% to the target element prevents the text from shifting to the right when split.

We should open a separate issue for this.

Updated CodePen
https://codepen.io/lukePeavey/pen/jOZgVXG