Paragraph overflow with ellipsis

Question

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

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

Here is the markup that I used for both title and content:

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

However with the content part (simple div), the content extends beyond the container (not shown in the picture). Also because content usually has a paragraph, when i apply the same css markup as above, it goes simply beyond 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 outer cell max-heightset. How can I make it so that the content stays within the cell max-height and whatever overflows goes to a next line and text-overflow: ellipsis; is applied instead of a long straight line?

Thanks guys.

If you go jQuery, there is a nifty plugin called dotdotdot - github.com/BeSite/jQuery.dotdotdot — hopkins-matt
– hopkins-matt, Commented May 7, 2015 at 19:57
possible duplicate of Is it possible to use text-overflow:ellipsis on multiline text? — isherwood
– isherwood, Commented May 7, 2015 at 19:57
Vanilla JS lib github.com/josephschmitt/Clamp.js Useful info: css-tricks.com/line-clampin — Daniel Imms
– Daniel Imms, Commented May 7, 2015 at 19:59

Alex Pan · Accepted Answer · 2015-05-07 19:57:41Z

25

Try this:

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

answered May 7, 2015 at 19:57

Alex Pan

4,7618 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Kim Over a year ago

Got it working by adding overflow:hidden; and what you provided. Thanks!

Nate Symer Over a year ago

This works well, and incidentally enough, the display property is crucial.

Brenton Scott Over a year ago

Could you clarify why this works? For beginners that may not understand display: -webkit-box- and the other webkit rules.

Collectives™ on Stack Overflow

Paragraph overflow with ellipsis

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related