Coder Perfect

Using an ellipsis to separate multiple lines of text [duplicate]


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.

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):, 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 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.


Answered by Eddybrando Vásquez

Post is based on