CSS - Hide paragraph overflow with ellipsis

Question

I'm trying to achieve a text-overflow of ellipsis in a paragraph of an undefined width. Most of the examples for this, state that the paragraph has to have a defined width but for my scenario, i wouldn't be able to set a specified width.

Below is an example of what i'm trying to achieve

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis...

Does this answer your question? [Overflow:hidden dots at the end](https://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end) — andi2.2, Mar 10 '21 at 07:28
@andi2.2 Unfortunately this doesn't really work for my scenario. The text is cut on one line and that example has a specified width. — thelandog, Mar 10 '21 at 07:30
But how should your html/css know where to shorten the paragraph? You need a fixed width or height (or an other kind of layout size, e.g. using flexbox) — andi2.2, Mar 10 '21 at 07:31
the paragraph is in div which is in another div with a responsive width. — thelandog, Mar 10 '21 at 07:32
then setting the height or width to 100% and using text-overflow: ellipsis should totally work — andi2.2, Mar 10 '21 at 07:34

score 1 · Accepted Answer · answered Mar 10 '21 at 07:48

Can you please check the below code? Hope it will work for you. You can use line-clamp property instead of overflow ellipsis, it truncates text at a specific number of lines and you change the line-clamp value as per your requirement.

Please refer to this link: https://jsfiddle.net/yudizsolutions/qde6tyhs/1/

.box {
  width: 300px;
}

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

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan fermentum suscipit. Fusce porta pretium volutpat. Aenean ornare arcu non justo aliquam molestie. In venenatis in metus id accumsan. Ut porttitor lacinia massa vitae volutpat.</p>
</div>

CSS - Hide paragraph overflow with ellipsis

1 Answers1