Clipping text inside a DIV

programming web dev
1

Hello, Good People;

I am trying to clip text inside a fixed-height DIV using ellipsis but the usual CSS properties do not produce multiple lines of text, instead shrinking my paragraph to a single line when it could occupy four:

{
  height: 150px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

I am open to a JavaScript approach but I cannot use JQuery.
Does anyone have a solution for this?

2

Found the solution. “line-clamp” does the trick nicely. Apparently it is still in ‘draft’ for CSS but adoption by browsers seems OK. It does the same as “text-overflow” but you get to define how many lines of text you want displayed before clipping.

1 Like
3

Totally missed this question initially! Glad you solved it. Yes, line-clamp is perfect for what you are trying to do :grinning: