DEV Community

Cover image for Truncate String with CSS
Jatin Sharma
Jatin Sharma

Posted on • Originally published at j471n.in

Truncate String with CSS

In this article, I am going to cover how you can create truncate strings or paragraphs by just using CSS.

What is Truncate?

Truncate means to make something shorter, especially by cutting off the top or end. In paragraphs, we make the string shorter by cutting the lines.

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s when an 
unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting.
Enter fullscreen mode Exit fullscreen mode

The above paragraph contains 4 lines and we want to make it short to two lines. like this -

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s, when....
Enter fullscreen mode Exit fullscreen mode

How to use it?

First, let's take a look at how my HTML is looking-

<div class="container">
  <h3>Truncate-2 (two line)</h3>
  <p class="truncate-2">Lorem Ipsum is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
more recently with desktop publishing software like Aldus PageMaker including 
versions of Lorem Ipsum.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

So as you can see I've applied the truncate-2 class to the paragraph. This class contains the following properties-

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* Change the number as per your requirement */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

After that result is something like this-

truncate-1

Codepen-

Wrapping Up

If you enjoyed this article then don't forget to press ❤️ and Bookmark it for later use. If you have any queries or suggestions don't hesitate to drop them. See you.

My Newsletter

Discussion (6)

Collapse
moopet profile image
Ben Sinclair

I didn't know you could do this!

However, I'm also suspicious of why display: -webkit-box works in Firefox...

Collapse
j471n profile image
Jatin Sharma Author

Yes, it works.

Collapse
moopet profile image
Ben Sinclair

I know, I was using Firefox when I looked - I'm just suspicious by nature!

Collapse
manhxuanpham profile image
manhxuanpham

good

Collapse
andrewbaisden profile image
Andrew Baisden

Great snippet!

Collapse
j471n profile image
Jatin Sharma Author

Thanks mate :)