Splitting lines with Split Text that nested long <b> bold text without weirdly breaking the line

[Reksa Andhika]

Please help, I have read the docs, it's possible but it will make the tag duplicate to make the good breaking line, and that's okay for me because I don't have "id" on nested splittext, only <b> or <strong>, so duplicating this will be okay. I have tried all property existed but not working, also already trying adding <b> display: line-block;

 

The result that I want:

 

The result I got with splittext:

Thank you.

See the Pen qBLOgoL by reksaandhika (@reksaandhika) on CodePen

[GreenSock]

Hi @Reksa Andhika. From the docs: 

Quote

Splitting nested elements by "lines" is not supported 

It's much more complex (or in some cases impossible) because it'd actually require creating entirely new nesting based on wrapping. The <strong> element, for example, might spill onto multiple PARTIAL lines, so how could two different line <div>s get wrapped around a single <strong>? And if it broke that <strong> into multiple ones, that could mess with your CSS. Imagine you had a border on that <strong>...uh oh. For example, try to recreate this by restructuring things so that there's a <div> around each line (but keep the formatting exactly the way it looks here): 

See the Pen MWZaMgG?editors=0110 by GreenSock (@GreenSock) on CodePen

 

That being said, I took a crack at improving the helper function: 

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

 

Does that help? 

[Reksa Andhika]

Wow this is complex than I expected!
That's why I have hard time figuring it out.

 

Thanks for the explanation and solution, this really helped my problem.

[Reksa Andhika]

The function is working only when have one <p> @GreenSock

when more than <p> it's duplicating line inside line, like:

<div class="line">
  <div class="line">
    Text
  </div>
</div>

 

I remove this code, and it's working better, why do we need to this code anyway in your function?

if (target.length > 1) {
  for (i = 0; i < target.length; i++) {
    split.lines = split.lines.concat(nestedLinesSplit(target[i], vars).lines);
  }
}

 

[GreenSock]

Good catch. I updated the CodePen demo: 

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

 

Better? 

[Reksa Andhika]

Yup, this one is better, thank you!