Alternative ways to truncate textual content with CSS

CSS is incredible; everyone knows that. It has many distinctive options that allow us to realize unbelievable responsiveness on the internet. Have you ever ever puzzled how the ellipses (...) you see on some widespread web sites (as proven within the picture beneath) are created?

Nicely, on this article, we are going to discover how you can obtain multi-line truncations in CSS utilizing the language of internet JavaScript. Let’s go!

Leap forward:

What’s truncation?

Truncating textual content in CSS means including an ellipsis on the finish of a sentence to point that there’s extra textual content to be learn. Sadly, there isn’t any truncation property to truncate textual content on the fly on the subject of utilizing CSS. So, how do you truncate textual content with CSS?

Luckily, there’s a mixture of some CSS properties that do the job. It’s price noting that these properties solely work when used collectively on a component or the phrases you’ve chosen to truncate.

CSS properties

The next properties will assist us truncate textual content in CSS:

• White-Area: nowrap;: This property forces the phrases right into a straight line and never wrap to the subsequent line

• Overflow: hidden;: This property causes the phrases to be contained inside their mum or dad container

• Textual content-overflow: ellipsis;: This property provides an ellipsis on the finish of the phrases

We are able to create a single-line truncation after we use these three CSS properties collectively on any textual content. This technique is taken into account the standard technique to truncate a sentence with CSS.

The right way to create a multi-line truncation

Utilizing CSS properties works positive for a single line of textual content and a multi-line textual content that spans greater than two traces. Nevertheless, this may also be achieved utilizing JavaScript.

Now, we are going to have a look at the 2 methods for multi-line truncation utilizing CSS or JavaScript. That approach, you possibly can decide which method works for you.

Multi-line textual content truncation with CSS

So, let’s have a look at the CSS method for a multi-line truncation. The very first thing to do is to set the peak of the field or the aspect itself. Subsequent, we rely the variety of traces we need to ignore earlier than truncating after which multiply the by the line-height to get the max-height.

Right here’s the way it’s carried out: Max-height: calc(line-height * the variety of the road we need to ignore);.

We’ll set Overflow to hidden. We will even set max-height to our most well-liked peak, the identical as line-height.

Then, now we have the -webkit-box-orient which we set to vertical, -webkit-line-clamp, and text-overflow which we set to ellipsis. We will even set the show to field:

.paragraph {
  Overflow:hidden;
  max-height: 6rem;
  line-height: 2.5rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  show: block;
}

Utilizing JavaScript to truncate

Subsequent, let’s have a look at how we will obtain this utilizing JavaScript. First, let’s create a operate known as truncate and cross within the phrases to be truncated as parameters. We will even give a max-length Parameter:

Const truncate (phrases, maxlength)=>{}

Now, we’re going to use the slice technique to truncate our textual content, and we will even return our truncated textual content from inside our truncate operate.

Word: We’ll give the slice technique an preliminary worth of zero (0) as a result of we should truncate from the start of phrases to the required space the place we want to cease:

Const truncate (phrases, maxlength)=>{
return `${phrases.slice(0, maxlength)} …`
}

Subsequent, for the final and remaining step, let’s wrap it up by passing the phrases and the maxlength as arguments:

Const phrases = "You might be studying textual content truncation with javascript which is completed with these three steps" 

Const truncate (phrases, maxlength)=>{
return `${phrases.slice(0, maxlength)} …`
}


truncate(phrases, 20)

On this case, the maxLength handles a specific edge case for a state of affairs the place the string we need to truncate isn’t lengthy sufficient to be truncated.

Right here, we need to return the unique string with out truncating it. Nevertheless, in a state of affairs the place this situation is glad, we need to truncate and add the ellipsis on the finish of the string.

Including a component after the ellipsis

In some conditions, I’ve discovered myself wanting so as to add a component akin to an icon after the ellipsis. However, when the road turns into too lengthy, the aspect is truncated with the ellipsis. The problem right here is getting the aspect to remain after the ellipsis.

So, how can we add the aspect after the ellipsis? Let’s say now we have the beneath HTML:

<div class="parent-box field"> 
    <div class="child-box"> 
        You might be studying textual content truncation with javascript which is completed with these three steps 
    </div> 
</div> 

<div class="parent-box field"> 
    <div class="child-box no-max-width"> 
        You might be studying textual content truncation with javascript which is completed with these three steps 
    </div> 
</div>

In different to realize this, we set the ::after pseudo-element to the mum or dad aspect .field. Then, we set the nest div with class .child-box and provides it a show of inline-block. This permits the pseudo-element of the .parent-box to return after the width of the .child-box.

If the outlined max-width is exceeded, then the overflow set to hidden comes into play. This permits us to have the ellipsis and the aspect of the .parent-box if there’s a text-overflow.

Word: The trick right here is to not declare the pseudo-element to a component that we declared overflow and width on. This must be carried out to the mum or dad aspect, which can, sooner or later, trim out the content material as soon as the max-width is reached:

.parent-box .child-box { 
    text-overflow: ellipsis; 
    show: inline-block; 
    max-width: 70%; 
    width: auto; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.parent-box .child-box.no-max-width { 
max-width: none; 
} 

.parent-box .child-box::earlier than { 
show: none; 
} 

.parent-box .field::after { 
    content material: 'X'; 
    show: inline-block; 
}

To study extra about pseudo-elements, try our information to CSS pseudo-elements.

Conclusion

On this article, we reviewed how you can truncate textual content in CSS utilizing a number of CSS and JavaScript methods. We additionally checked out how we will add a component after the ellipsis, which is sort of difficult to realize in lots of instances.

I hope you loved this text, and be at liberty to recommend different patterns I could have missed. Thanks for taking the time to learn this one, even when it was brief, and preserve coding!