how to truncate paragraph with ellipsis

Question

I'm trying to truncate a paragraph to look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisi 
dui. Suspendisse a massa non ante finibus tincidunt ut at arcu. In sed massa 
eget dolor faucibus rutrum. Duis in dolor id turpis fermentum volutpat. Nam 
commodo augue et erat congue pellentesque. Phasellus egestas mi massa, non 
elementum magna ornare eu. In fermen....

But the answers I found so far makes my paragraph look like this instead:

Lorem ipsum dolor sit amet, consectetur adipiscing...

What am I missing here?

@ObsidianAge oh wow thanks! – Lee Merlas Jul 18 '18 at 02:46 — Lee Merlas, Jul 18 '18 at 02:46

score 0 · Answer 1 · answered Jul 18 '18 at 02:48

If modern browser is targeted, you can try webkit-box

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

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisi 
dui. Suspendisse a massa non ante finibus tincidunt ut at arcu. In sed massa 
eget dolor faucibus rutrum. Duis in dolor id turpis fermentum volutpat. Nam 
commodo augue et erat congue pellentesque. Phasellus egestas mi massa, non 
elementum magna ornare eu.
</p>

how to truncate paragraph with ellipsis

1 Answers1