Truncating text to fit inside an element

How can I achieve an effect similar to blog post previews, where a portion of the blog post is displayed in a container element before it’s cut off and usually followed by a “Read More” link?

Here’s an image of what I’m referring to. The image on the left is a full blog post, and the one on the right is a truncated blog post with a “Read More” has a lot of great how to stuff.

This is what you are looking for:

1 Like

That’s an awesome resource. Thank you!

I think I have an alternate way of going about it now, but the technique in this W3CS page is something I can add to my toolbox.