SplitText - How to create our own HTML structure ?

[MathieuDaix 0 Likes (Newbie)]

Hello,

 

 

I would like to know if it is possible to create my own HTML structure with SplitText. That is to say, instead of having a single div around each line, I would like to create 2 divs around each line.

 

Thanks.

[Shaun Gorneau 2,037 Likes (Superhero)]

Hi @MathieuDaix,

 

A quick solution would be to assign a `linesClass` in the splitText() vars, then use that class as a hook for jQuery to wrap() those lines with another div. Here is a CodePen showing that. There is also a non-jQuery option at the bottom of the script.

 

See the Pen jJbZYo?editors=0010 by sgorneau (@sgorneau) on CodePen

 

 

You can see below, each <div class="myLines"> (assigned with splitText ) is wrapped in a <div class="myLinesWrapper"> ( done with jQuery ).

 

Hope this helps!

 

 

[MathieuDaix 0 Likes (Newbie)]

Thanks you Shaun !

[Shaun Gorneau 2,037 Likes (Superhero)]

Happy to help, @MathieuDaix!

[PointC 14,465 Likes (Superhero)]

Another option is to simply split twice.

See the Pen pxBMvy by PointC (@PointC) on CodePen

Happy tweening.

 

[Carl 11,324 Likes (Superhero)]

@PointC - fancy!

[Shaun Gorneau 2,037 Likes (Superhero)]

4 hours ago, PointC said:

Another option is to simply split twice.

 

 

You so crafty, Craig!

[PointC 14,465 Likes (Superhero)]

That's me. Fancy and crafty.