How to line clamp using gsap and splittext

[SergiArias]

Hi!!

 

I need to line clamp some text like in instagram or like this design:

 

 

There are a lot of discussions around coding forums, and I finally used this plugin: https://github.com/jmenglis/clamp-js-main but it doesn't work with html content, only plain text. Here there is another example and coding practices of what I want: https://css-tricks.com/line-clampin/

 

So I was thinking that splittext plugin is capable of splitting text while respecting html tags, so it would be interesting to create an example of line clamping with a nice expanding animation (which by the way isn't very common in many websites).

 

How would you approach the problem? I will create a codepen once I have some strategies but for now I would like to know if someone thought about this problem and how to solve it as elegantly as possible.

 

Thank you!!

[GreenSock]

Hm, I don't have a ton of time to think this all through for you, but if your goal is to allow an unlimited amount of nested elements, you may run into some problems because of the inherent nature of wrapping. Like if you have a <span> that goes across 8 lines of text - see what I mean? If you've got one <span> that goes onto 2 lines, than another that goes across 6 lines but you want to only show the first 4 lines total, SplitText cannot split that up part-way. It'll do its best, of course, but I just want you to be aware of the inherent logic problems with things like that. 

 

You could split by lines, then just take the first X lines, hide the rest, and slap a <div> with "more..." on the bottom right corner or something. 

 

Good luck! We'd love to see what you come up with.

[SergiArias]

 

 

 

 

Thank you!! I have a first version of an implementation.

It can be seen in the attached video.

 

In my particular case, I have control of the HTML tags being used in the clamping text. With unexpected tags it gets more complex.

What I'm doing, in general terms is:

1. Hide overflow and use a max-height so in first loading it looks similar to the end result.
2. Separate by lines
3. Copy the line with the read more and position absolute on top of the line.
4. Move the overflown lines to a container with height 0
5. Transform the copied line to add the read more anchor and cut some text.
6. Fade in the "read more" line on top of the original.
7. When the anchor is clicked, fade-out the "read more" line and destroy it.
8. Tween the overflown lines to height auto (removing previously the max-height)
9. Revert the splittext to clean the dom.

Now things get messy with window resizing and all.

 

In case of unexpected tags, what I am thinking is that when the text is in "clamped" mode we don't need them as it's just a preview, so maybe I would strip all the tags, do the same operation, and when it is reverted to the original state we get the tags again.

 

One thing I noticed is that splittext is quite performant compared to other plugins that try to do the line-clamp, but of course, I'm using only part of it, as I only need to split the lines that I decided to clamp. With a lot of "read mores" in a website, would the performance of it suffer?

 

Thanks!

 

 

[GreenSock]

13 hours ago, SergiArias said:

With a lot of "read mores" in a website, would the performance of it suffer?

Tough to say for sure - I'd recommend running some tests. I kinda doubt it'll be problematic.