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: Hide overflow and use a max-height so in first loading it looks similar to the end result. Separate by lines Copy the line with the read more and position absolute on top of the line. Move the overflown lines to a container with height 0 Transform the copied line to add the read more anchor and cut some text. Fade in the "read more" line on top of the original. When the anchor is clicked, fade-out the "read more" line and destroy it. Tween the overflown lines to height auto (removing previously the max-height) 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! Gravació de pantalla 2021-05-14 a les 10.16.24.mov

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!!