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
.
What I am trying to achieve is the last part (red circle) in the image.
So, I already have outer cell max-height
set. 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.
Try this:
div {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With