Example

by luka kupunia

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp -->

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.An ellipsis will be shown at the point where the text is clamped.
</p>

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}