10

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Steve Kim
  • 5,293
  • 16
  • 54
  • 99
  • If you go jQuery, there is a nifty plugin called dotdotdot - https://github.com/BeSite/jQuery.dotdotdot – hopkins-matt May 07 '15 at 19:57
  • possible duplicate of [Is it possible to use text-overflow:ellipsis on multiline text?](http://stackoverflow.com/questions/6572330/is-it-possible-to-use-text-overflowellipsis-on-multiline-text) – isherwood May 07 '15 at 19:57
  • 1
    Vanilla JS lib https://github.com/josephschmitt/Clamp.js Useful info: https://css-tricks.com/line-clampin/ – Daniel Imms May 07 '15 at 19:59

1 Answers1

25

Try this:

div {
  display: -webkit-box;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}
Alex Pan
  • 4,341
  • 8
  • 34
  • 45