Break lines with strong div

[dngraphisme]

Hello @lukePeavey ,

Thank you already for this little library ! Well seen the takeover of splitText from Gsap. Less heavy in addition to size :)

However, I have a question that I still can't manage regarding the split lines and the or or tags.

Here is my HTML code :

<p>Installée dans un cabinet à Saint-Raphaël, auprès de mes amis Chiropracteur je vous
                        propose un accompagnement personnalisé à travers une approche holistique qui se traduit par la
                        considération de ses 3 points : <strong>Le bien-être psycho-émotionnel, physiologique (corps), et par le mode de vie.</strong></p>

My JS code :

window.$splitLines.each(function () {
                let $el = $(this),
                    $animText = $el.find($splitTextElements);

                $animText.each(function () {
                    let $lines = $(this);
                    SplitType.create($lines, {
                        types: "lines, words",
                        lineClass: "overflow-split-line",
                        wordClass: 'inline-block',
                    });
                    gsap.set(".overflow-split-line", {
                        overflow: "hidden"
                    });
                    gsap.set('.overflow-split-line > div, .overflow-split-line strong > div', {
                        yPercent: 105
                    });
                });
            });

Anyway I always have a newline with the tag, I also don't understand the part you mention in nested-elements

See my screenshot : https://ibb.co/tz4v0KX

Am I doing something wrong ?

Thanks for your return :) Regards Nicolas

[lukePeavey]

Nested elements are not fully compatible with splitting text into lines.

As a workaround, you could wrap each word in a <strong> tag, instead of wrapping the entire sentence in a <strong> tag. This will allow you to split the text into lines, and still maintain the original lines breaks.

Live Example on CodePen

[dngraphisme]

Hello @lukePeavey,

Ok now I get it, I was thinking too. Gsap's SplitText has the same behavior. Too bad but it's already better than nothing.

Thank you very much for the quick response @lukePeavey :)

[lukePeavey]

You're welcome.

[lukePeavey]

I'm going to close this, but feel free to post a comment if you have any other questions

[dimasadityamukhsinin]

hello, @lukePeavey

It seems there's something wrong when I input this:

<p id="split">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Nam in ante quis mi sollicitudin gravida eget congue tortor. Vivamus sit amet ipsum id sapien</strong> maximus hendrerit. Integer vehicula diam nec porta vulputate. Mauris sed metus varius, aliquam magna vitae, congue diam.</p>

But the text inside the <strong> tag doesn't "split" as it should. Is there a solution?