Lines are not being wrapped

[Slgoetz]

From the sound of the documentation when you split by lines it should wrap each line in a dom element

const results = Splitting({ 
         target:target, 
	by:'lines'
});

If that is not the case, is it possible to do that?

[shshaw]

The documentation should likely be clarified a bit more :-)

The way it works now is by splitting the words ( equivalent to Splitting({ by: 'words' }) ), then adds a --line-index variable to each .word. This setup was to lessen the impact on the DOM when lines needed to be recalculated on resize. If you have DOM elements for each line, you have to shuffle the child elements around on resize versus just updating the style property.

This has come up before. I'm not directly opposed to having line wrappers, but it definitely ups the complexity and impacts performance each time it runs; though would help performance of certain animations (animating .line elements versus all the .word elements)

Certainly open to feedback.

[notoriousb1t]

I think if this is added it should be behind an option. I personally like the line indexing instead of adding dom nodes, but I definitely understand the desire to have it split everything in the dom for a one-time split in certain cases.

[FrankM1]

I'm looking to have lines wrapped as well. This is a pretty common use case when animating text.

[tleifj]

Has anyone come up with a way to implement this? Looking for a solution as well!

[ParallelUniv3rse]

+1

EDIT: For anyone needing this functionality I came up with a workaround for now:

      const res = splitText({
        target: this.dom.heroText,
        by: 'lines'
      });

      res.forEach((splitResult) => {
        const wrappedLines = splitResult.lines.map((wordsArr) => `
        <span class="line">
          ${wordsArr.map((word) => `${word.outerHTML}<span class="whitespace"> 
         </span>`).join('')}
        </span>`).join('');
        splitResult.el.innerHTML = wrappedLines;
      });