Text Paragraph Truncate - CSS

 

Use the -webkit-line-clamp property to truncate the text to a specific number of lines.

DEMO

This text is trimmed to 3 lines

You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.

This text is trimmed to 4 lines

You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML

<h3>This text is trimmed to 3 lines</h3>
<div class="tile-clamp">
  <p class="line-clamp">
    You can use <code>-webkit-line-clamp</code> property to truncate the text to the specific number of lines.
    An ellipsis will be shown at the point where the text is clamped.
  </p>
</div>
<br>
<h3>This text is trimmed to 4 lines</h3>
<div class="tile-clamp">
  <p class="line-clamp line-clamp--four">
    You can use <code>-webkit-line-clamp</code> property to truncate the text to the specific number of lines.
    An ellipsis will be shown at the point where the text is clamped.
  </p>
</div>

CSS

.tile-clamp {
  background: Aqua;
  padding: 15px;
  margin-bottom: 15px;
  padding: 15px;
  width: 300px;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.line-clamp--four {
  -webkit-line-clamp: 4; 
}