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.

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:

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:

See the Pen Single-Line Truncate Text By CSS by Shan Shah (@ShanShahOfficial) on CodePen.

Article in progress….Make sure to subscribe for more updates.

You can support by sharing below tweet:

Shan Shah, explained the concept of text truncation with pure CSS in more detail. Please, do check this out. Click To Tweet

If you’re interested to upgrade your skills you will love this article.

Check Coder Champ for Web Design and Development resources.

Add Comment