Overflow paragraph with ellipsis

So I have a fixed height cell with title and content (shown below).

When the screen size gets smaller, the title gets text-overflow:ellipsis;


Here's the markup I used for the title and content:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    


However, with a piece of content (simple div

), the content extends outside the container (not shown in the picture). Also, since the content usually has a paragraph, when I apply the same css markup as above, it goes outside the container in a long line without break


enter image description here

What I am trying to achieve is the last part (red circle) in the image.

So, I already have an outer cell max-height

. How can I make it so that the content is inside the cell max-height

and all overflows go to the next line, and text-overflow: ellipsis;

is applied instead of a long straight line?

Thanks guys.


source to share

1 answer

Try the following:

div {
  display: -webkit-box;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  




All Articles