Problem
Is there a way to put an ellipsis on the last line of a div with a fluid height (20%)?
I discovered the -webkit-line-clamp function in CSS, but the line number would vary based on the window size in my situation.
I’ve created a JSFiddle to demonstrate the problem. https://jsfiddle.net/96knodm6/
Asked by Bruno Landowski
Solution #1
Just increase the -webkit-line-clamp: 4; to increase the number of lines
Because line clamp is a proprietary and undocumented CSS (webkit): https://caniuse.com/#feat=css-line-clamp, it is only supported by a few browsers at the moment.
‘display’ property was duplicated, and ‘text-overflow: ellipsis’ was removed because it was unneeded.
Answered by Jobincs
Solution #2
The text-overflow feature in CSS enables applying ellipsis (…) to a single line of text a little easier. Although it’s still a little tough (due to all the criteria — see below), text-overflow makes it possible and stable.
If, on the other hand, you wish to utilize ellipsis on multiline text, like in this case, don’t expect to have much fun. There is no standard way to achieve this with CSS, and the workarounds are hit-or-miss.
Text-overflow allows you to apply ellipsis to a single line of text. The following CSS specifications must be followed:
As a result, this will work:
jsFiddle version
BUT, remove the width, set the overflow to visible, remove white-space: nowrap, or use something other than a block container element, and ellipsis fails badly.
One important point to remember is that ellipsis has no effect on multiline text. (The requirement for white-space: nowrap excludes this possibility.)
jsFiddle version
Because CSS lacks an ellipsis feature for multiline text, many solutions have been devised. Several of these strategies are listed below:
The Mobify link above has been removed and replaced with a link to an archive.org copy, but it appears to be working in this codepen.
Answered by Michael Benjamin
Solution #3
Please review this CSS for multi-line text ellipsis.
Answered by Sawan mishra
Solution #4
Answered by satish mallick
Solution #5
I simplified it by looking at how YouTube handles it on their homepage:
.multine-ellipsis {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
This will allow for two lines of code, followed by an ellipsis.
Gist: https://gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b
Answered by Eddybrando Vásquez
Post is based on https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text