Step by Step guide to CSS text truncate; shorten text like a pro
Published: 2023-03-24 01:51:22

---
title: Step by Step guide to CSS text truncate; shorten text like a pro
published: true
date: 2023-01-25 04:29:03 UTC
tags: 
canonical_url: https://nirjan.dev/blog/step-by-step-guide-to-truncating-text-in-css-shorten-text-like-a-pro
---

In this post, I'll show you how to implement a CSS text truncate. I will cover how to shorten both a single line and multiple lines. I'll also mention some common problems you may face when doing a CSS text truncate. This was originally published as a [guide to css text truncate](https://nirjan.dev/blog/step-by-step-guide-to-truncating-text-in-css-shorten-text-like-a-pro) on my personal blog.

## What is text truncation?

Truncated or shortened text is most common when you're working on a design with equal-height columns. But generally, the text for those columns is dynamic. I had to work on a design like that at work recently.

 ![Row of articles using a card design that shows off CSS text truncate](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Row of articles using a card design that shows off CSS text truncate" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/3e328d4e7171d518186cb40e8adfe0c8367eebd4-1287x786.png?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

The category names like Mario, Nintendo, Call of Duty: Modern Warfare, etc need to be in a single line. If it doesn't fit, then I need to truncate it. I also need to truncate the title of the article to 4 lines. So, for this specific layout, I had to do CSS text truncate for both a single line and multiple lines.

## How to do CSS text truncate?

Let's start off with a single line CSS text truncate with a “p” tag. You can follow along with me using this snippet. Here's the link to the [finished codepen](https://codepen.io/nirjan_dev/pen/GRWYQMr) if you want to copy it from there.

```css
<p class="single-truncate">
  Call of Duty: Modern Warfare
</p>

/* global styles */
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 0.8em;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-size: 1.6rem;
}

p {
  background: tomato;
  padding: 1em;
}

```

 ![box with the text, Call of Duty: Modern Warfare](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="box with the text, Call of Duty: Modern Warfare" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/e3e09678fe2b2269602047ba9209bc1402f96c86-579x337.png?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

Here are the steps you need to follow to truncate this text.

### 1. Setting fixed width with CSS

You need to set a width on the element that you are targetting. So, the browser knows how long the text should be before you truncate it.

```css
/* truncate stuff */
.single-truncate {
  width: 150px;
}

```

 ![box with the text, Call of Duty: Modern Warfare](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="box with the text, Call of Duty: Modern Warfare" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/d39d101589bf27491615e79468924bd62f84bfa1-1600x1125.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>
### 2. Using the white-space property in CSS

To avoid wrapping the text to the next line, we need to set the [white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) to nowrap.

```css
.single-truncate {
  width: 150px;
  white-space: nowrap;
}

```

 ![Box with the text, Call of Duty: Modern Warfare, Modern Warfare is sticking outside the box](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Box with the text, Call of Duty: Modern Warfare, Modern Warfare is sticking outside the box" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/f2897231276b39469fd8994bc9838c88cb2efb06-1200x529.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>
### 3. Using the overflow CSS property

Next, you need to set the overflow property to hidden. This hides the text when it goes beyond it's width.

```css
.single-truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
}

```

 ![Box with the text Call of Duty: Modern Warfare, Modern Warfare is clipped by the border and hidden](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Box with the text Call of Duty: Modern Warfare, Modern Warfare is clipped by the border and hidden" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/d71eb0d09db22a8a3a3273fd5c746fd4e8346a8a-1200x752.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>
### 4. CSS text truncate with ellipsis 

We have successfully truncated the text. But it would be nice to have some sort of indication that we have truncated it. Let's add ellipses to the end of the shortened text. We can do this by setting the text-overflow property to ellipsis.

```css
.single-truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

```

 ![Box with the text Call of Duty: Modern Warfare, Modern Warfare is truncated](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Box with the text Call of Duty: Modern Warfare, Modern Warfare is truncated" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/1a5c2cb001edcf13a3f5d75488fb44ecee6cb6da-1200x749.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

> All you need to remember is 4 CSS properties. Width, white-space, overflow, text-overflow or remember the acronym, **WWOT**. You can use "We Won't Overflow Text” as a mnemonic. You can probably come up with something better.

## How do you shorten a paragraph in CSS?

Truncating text for multiple lines is a bit more tricky. Let's start with a simple “p” tag again, but with some more text this time and make it wider.

```css
<p class="multiple-truncate">
   Nintendo E3 2021: Direct Dates and Time, Predictions, Rumours and Zelda Plans 
</p>

.multiple-truncate {
  width: 250px;
}

```

 ![Box with an article title](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Box with an article title" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/9f3a158112ddbc52577b75cb0bac79154e8eb23f-1200x793.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

Right now, the text has 5 lines. Let's see if we can truncate it to just 4 lines.

### How to use line clamp in CSS

This property only works if you set the [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property to -webkit-box or -webkit-inline-box. Also, the [-webkit-box-orient](https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient) property needs to be set to vertical.

> **Note** : This property was originally implemented in WebKit and has some issues. It got standardized for legacy support.

> When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

Now, let's add the new rules to our multiple-truncate class and see what will happen.

```css
  .multiple-truncate {
    width: 250px;

  /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

```

 ![Box with an article title, ellipsis after the fourth line but the fifth line is also showing](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="Box with an article title, ellipsis after the fourth line but the fifth line is also showing" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/12fe36132bd86484a2f18c535a2d29c299258631-1200x717.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

It's not quite what we were looking for. The problem with this approach is that we won't be able to have a padding-bottom on the actual text. Otherwise, the space occupied by the bottom padding will show the truncated text. So, let's remove the bottom padding for now.

```css
.multiple-truncate {
  width: 250px;
  
  /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-bottom: 0;
}

```

Then we need to hide the truncated text by setting the overflow to hidden.

```css
.multiple-truncate {
  width: 250px; 

 /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-bottom: 0;
  overflow: hidden;
}

```

The downside to this approach is that you can't have a padding-bottom on the text. You would need to add your padding to the parent or try something else.

One thing you can try is to set a border on an "after" pseudo-element. The border-color should be the same as the background for the text. Then, you need to set the border-width to the padding-bottom value you want. You can use an SCSS mixin or CSS variables for this to make it more robust and reusable.

```css
.multiple-truncate:after {
  content: '';
  display: block;
  border-bottom: 1em solid tomato;
}

```

 ![box with an article title, truncated after 4 lines](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)<noscript><img alt="box with an article title, truncated after 4 lines" sizes="(max-width: 800px) 100vw, 800px" srcset="https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=640&amp;q=75&amp;fit=clip&amp;auto=format 640w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=750&amp;q=75&amp;fit=clip&amp;auto=format 750w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=828&amp;q=75&amp;fit=clip&amp;auto=format 828w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=1080&amp;q=75&amp;fit=clip&amp;auto=format 1080w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=1200&amp;q=75&amp;fit=clip&amp;auto=format 1200w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=1920&amp;q=75&amp;fit=clip&amp;auto=format 1920w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=2048&amp;q=75&amp;fit=clip&amp;auto=format 2048w, https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format 3840w" src="https://cdn.sanity.io/images/rl6xlgdh/production/ad6bad26b138160713bf56114849d3cc4a831a6a-1200x740.webp?w=3840&amp;q=75&amp;fit=clip&amp;auto=format" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"></noscript>

## CSS text Truncate issue with flexbox

> Truncating text like this doesn't work well if the element you're truncating has a display value of flex or inline-flex.

The text will still be shortened but you won't get the ellipsis at the end. I'm not sure why it happens or if there are any workarounds for this. If you have any ideas, then let me know in the comments below.

## SCSS mixin for truncating text

Here are two SCSS mixins that will make truncating text easier.

```css
@mixin truncate-single-line($width) {
  width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin truncate-multiple-lines($width, $lines, $paddingBottom: false, $bg) {
  width: $width;
  -webkit-line-clamp: $lines;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0;
  
  @if $paddingBottom {
    &:after {
    content: '';
    display: block;
      border-bottom-width: $paddingBottom;
      border-bottom-style: solid;
      border-bottom-color: $bg;
    }
  }
}

```

You can even use CSS variables for the **$paddingBottom** argument and then use media queries to make it responsive without changing the mixin.

```css
.multiple-truncate--with-mixin {
  --pd: 1em;
 padding: var(--pd);
  @include truncate-multiple-lines($width: 250px, $lines: 4, $bg: tomato, $paddingBottom: var(--pd));
  
 @media (max-width: 600px) {
    --pd: 0.2em;
  }
}

```

## Summary on CSS text truncate

Here's a quick summary of how to do text truncation with CSS:

- Truncated or shortened text is commonly used in designs with equal-height columns where the text is dynamic.
- To truncate text in CSS, you can use the following steps:
  1. Set a fixed width on the element you are targeting.
  2. Use the white-space property and set it to 'nowrap' to avoid wrapping the text to the next line.
  3. Use the overflow property and set it to 'hidden' to hide the text when it goes beyond its width.
  4. Use the text-overflow property and set it to 'ellipsis' to add an indication that the text has been truncated.
- Truncating text for multiple lines is more tricky, but can be done by setting a fixed height on the element, using the display property and setting it to '-webkit-box' and '-webkit-line-clamp' and setting the number of lines to be displayed.

How has your experience been with truncating text in CSS? What techniques have you tried? Do you know any other ways to do this? Let me know in the comments below. I hope this was a helpful article.

##