How to add an ellipsis on the third line of text?

Question

I'm creating a blog that has an introductory content section for my articles and I have the code below as an example:

.post-desc {
  white-space: nowrap; 
  width: 100px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}

<p class="post-desc">This is some long text that will not fit in the box.</p>

See that in the example above, the content is leaked from the parent element, that is, it falls outside the element it is in and is immediately inserted as an ellipsis (...).

However, in this case, it is inserting the ellipsis on the first line, because of the white-space: nowrap specified as a continuous line.

What I would like is that the ellipsis be added in the 3rd third line and not the 1st first:

.post-desc {
  width: 100px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}

<p class="post-desc">This is some long text that will not fit in the box.</p>

In the code above the word the box. drops down as the 4th line. Contents from the 3rd line onwards I would like them to be hidden and the ellipsis to be applied to the 3rd line and not the 1st first.

Answer 1

You can truncate the text using line-clamp. The ellipsis effect comes from using display: -webkit-box; and -webkit-box-orient: vertical; paired with overflow: hidden;.

.post-desc {
  width: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 1px solid #000000;
}

<p class="post-desc">This is some long text that will not fit in the box.</p>