Custom “Read More” to Clipped Lines of Text with JavaScript – And Full Custom Code for You

Hi everybody!

I wanted to share a neat little JavaScript snippet I worked on during my first YouTube live stream. The goal was to clip a block of text to a specific number of lines and add a "Read More" link (or anything else, as the current project requires) at the end if the text exceeds that limit—in the same block, not as a separate button.

The History

The project, which I can’t name just yet, used a previous version of this function. How did it work?

1. It split the text into separate characters.
2. Placed each and every single one into a <span>.
3. Used forEach on the spans and checked if the offsetTop of that span changed—if it did, it’s a new line.

I don’t know where my head was when coding this—not on my shoulders, that’s for sure.

Amazing New Solution!

Frankly, it’s nothing that hasn’t been done before.

But it works.

And it’s Elegant!

How It Works

In short, it checks added characters in a loop, starting with a single character plus the appendage, and if the block’s height is higher than before, it’s a new line.

As I said, elegant! I love this new solution.

And I kept that Observer, because why not, right?

Fun Fact

I asked ChatGPT to write a dark sci-fi story. Haven't read it, yet. Honestly - I can't wait to get to that!

Come Hang Out Next Time

The YouTube live stream was an interesting experience. I liked it a lot!

Check the stream here: https://youtube.com/live/FBpU7P3o5ME

Thank you for reading!