Truncate text with CSS – The Possible Ways

Problem:

There are a lot of methods in every language to truncate text. But, recently, I faced a challenge on front-end in CSS, where I needed to truncate text for multiple lines. There were some situations where I was not allowed to use the JS function. So, I had to fix that through CSS.

Quick Note: If you are new here: Our YouTube channel can help you to learn modern Web Development by building Real World projects fast & easy way:
Coder Champ - Subscribe Now

Before diving into the exact solution, I want you to understand the properties below. I have made them easy for you, so you can quickly grab concepts.

white-space:

Consider this property as the box text handler. In simple words, when you put the text in any element, the text adjustment in that specific space depends upon the width of it. If the width of the box is 40px, and you added text into it. The text will wrap it up, according to the available white space.

By default, the white-space of the box is set to normal. So, every single text which will hit the limit of 400px will wrap and shift to the next line automatically.

There are several different values which you can use like:

white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: nowrap;

text-overflow:

What do you want to do with the hidden text?

The value which worked for me when I wanted to display three dots at the end of my truncated text was ellipsis.

text-overflow: ellipsis;

Note, this property will not work unless your box where you are putting text doesn’t have white-space and overflow: hidden; properties.

Solution # 1: Truncate text for single line

Sometimes, we want our text to be on a straight line. We can achieve it by setting a white-space property to the value nowrap.

This solution works for single-line truncation.

Force text to be on a single line:
white-space: nowrap;

Now, our text should be on the same line and should overflow from the box if it’s long enough and wrapped before.

Here is the next thing we need to tackle. We need to hide the text which is over-flowing and then add the ellipsis (three dots at the end).

I will use the following properties altogether:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Below is a complete example of solution:

Solution # 2: Truncate text for multiple lines.

Let’s be quick and dive into the second solution, which is on multi-line.

The process is straightforward; all you need is to set the height on the box or element, but here is the tricky part.

We will need to count the number of lines we desire and then multiply it with line-height to get the maximum height.

There are several other properties, which are necessary for this solution. You can check that into the code pen.

max-height: calc(line-height * number of lines you desire);

Below is a quick example:

Do you know about this trick of CSS Multiple Box-shadows?

Added a new Video about 5 Tips to Master CSS:

Comments

[Robson Sobral]

Great! Thank you for sharing the knowledge.

Why 2 overflow:hidden;, one with and the other without space?

[Cornea Florin]

nice article!, thanks Shan

[Shan Asif]

Thanks Cornea

[Peyton McGinnis]

Interesting edge case! Great article.

[Shan Asif]

Thanks Peyton McGinnis

[seand52]

Unfortunately line clamp doesn't work for IE 11 :(

[Xuan Dinh]

In some case (IOS device), three dots goes in middle paragraph