How can I do text-overflow: ellipsis on two lines?

Question

I have a container where the text may expand to two lines and it\'s 40px in height, with an 18px font size. When I do:

text-overflow: ellipsis;
white-space:          


        

Answer 1

Just want to add my two cents. The closest pure CSS solution that works is the -webkit-line-clamp method but is limited to webkit browsers and is the remnant of an old flexbox implementation (which may be removed in the future).

Perhaps you should reconsider if you really require an ellipses on vertically overflowed text.

I suggest instead use a scroll-able text box instead. I believe this is the best solution because of these three reasons:

1. Works in every major browser
2. No css workarounds, hacks, or javascript involved
3. Communicates well to the user that text is cutoff but gives them the option to scroll through it if they wish - plus, users are already accustomed to vertical scroll bars

Here is sample code for a text box:

.element {
  display: inline-block;
  height: 200px;
  overflow-y: auto;

  /* this is to preserve text containing new lines */
  white-space: pre-line;
}

If I had to choose though, I would use a javascript solution along the lines of Succint which deletes words after a certain amount and appends an ... at the end. This is great if you use React because you can implement all the code required inside the component as a function and if you need the original text you still have it as a props value.