How to Truncate Multi-Line String with Pure CSS

It's a common problem to truncate a multi-line block of text. In this snippet, we'll show how to do it with CSS.

Here, the CSS line-clamp property can be useful. This property is used to limit the block of text to a specified number of lines. The difficulty with this property is that it has limited browser support. However, you can use -webkit-line-clamp instead.

Note that WebKit can sometimes cut off the last letters of the word. In WebKit, there isn't an alternative to ellipsis. After the truncated line, you can only use ellipsis.

Let's see how а multi-line string can be truncated.

In the following example, we use both a single-line and multi-line truncation.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use <p> elements having the following class names: "normal" to display a normal text, "single-line" to display a single-line truncation, and "multi-line" to display a multi-line truncation.
  • Add content to them.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p class="normal">
      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.
    </p>
    <p class="single-line">
      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.
    </p>
    <p class="multi-line">
      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.
    </p>
  </body>
</html>

Add CSS

  • Use the border and width properties for all three elements.
  • For the first element, specify only background-color.
  • For the second element, specify the white-space, overflow, text-overflow, and background-color properties.
  • For the third element, specify display, overflow, background-color. Also, add box-orient and line-clamp with the -webkit- prefix.
p {
  border: 1px solid #000000;
  width: 230px;
}

.normal {
  background-color: #a6a9ab;
}

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #a6a9ab;
}

.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  background-color: #a6a9ab
}

Here is the result of our code.

Example of truncating a multi-line text using -webkit-line-clamp:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 1px solid #000000;
        width: 230px;
      }
      .normal {
        background-color: #a6a9ab;
      }
      .single-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #a6a9ab;
      }
      .multi-line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        background-color: #a6a9ab;
      }
    </style>
  </head>
  <body>
    <p class="normal">
      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.
    </p>
    <p class="single-line">
      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.
    </p>
    <p class="multi-line">
      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.
    </p>
  </body>
</html>

Result

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.

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.


Be sure that the element does not have (bottom) padding so that text lines that are out-of-bounds won't be rendered. If there is a need for spacing around the truncated text, padding must be applied to the parent element.

The text can also be truncated using the CSS ::after pseudo-element.

In the next example, the overflow of the <span> is hidden, and the max-height is set based on the line-height.

Example of truncating a multi-line text using the ::after pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        position: relative;
        font-size: 14px;
        color: #000000;
        width: 240px;
      }
      .text-concat {
        position: relative;
        display: inline-block;
        word-wrap: break-word;
        overflow: hidden;
        max-height: 3.6em;
        line-height: 1.2em;
        text-align: justify;
      }
      .text.ellipsis::after {
        content: "...";
        position: absolute;
        right: -12px;
        bottom: 4px;
      }
    </style>
  </head>
  <body>
    <div class="text ellipsis">
      <span class="text-concat">
        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. 
      </span>
    </div>
  </body>
</html>
This solution always adds an ellipsis, even if it is not needed.