How to add an ellipsis after a sentence?

Question

Suppose I have this sentence:

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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.

I want just three lines. After the first 3 lines nothing will be shown except ... (ellipsis). Like:

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. It has surv...

How to do it?

Terry · Accepted Answer · 2020-04-09T17:11:57.047

You can use the -webkit-line-clamp property to achieve what you want. If you want to clamp it to 3 lines, then -webkit-line-clamp: 3 should be used. Despite it having a -webkit vendor prefix, it is surprisingly quite widely support among modern browsers.

A caveat is that -webkit-line-clamp has to be used with two additional CSS properties: display: -webkit-box and -webkit-box-orient: vertical.

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

  /** Presentation purposes only **/
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
  color: #333;
}

<div class="box">
  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. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.
</div>

Hopefully when CSS Overflow Module Level 3 becomes finalized and widely supported, we can start using the non-prefixed line-clamp property in the near future, with the ability to add custom overflowing text indicator. Right now, -webkit-line-clamp uses the horizontal ellipsis glyph to indicate cutoff text, but with no possibility to customize it.

How to add an ellipsis after a sentence?

1 Answers1