Text-Overflow Ellipsis not working for multi-line text boxes

Question

Why is it so hard to have this:

• Fixed height DIV with multiple lines of text
• If text is too long for this box, show "..." at the end
• Do not cut words!

The following JSFiddle shows a demo.

Questions:

• How can I make the "..." also appear in Firefox, IE, Edge and Safari? It only works in Chrome at this moment (see .chrome css) in JSFiddle
• How can I make sure that only spaces get cut but no words?
• How can this be done with CSS only?

Example:

• The second box cuts the word abcdefghijk, I want it to cut after the second word and then add the "..."

.truncate {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 10px;
  margin-bottom: 10px;
  width: 260px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.truncate.ellipsis {
  height: 50px;
  text-overflow: ellipsis;
}
.truncate.ellipsis.chrome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="truncate">
  No truncating at all, height adjusts to text: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>
<div class="truncate ellipsis">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>
<div class="truncate ellipsis chrome">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>

Answer 1

There is currently no cross browser way to do this. That said, there are a few approches you could try:

• Estimate the number of characters that fit in your DIV, truncate the text to the proper length, and add your ellipsis at the end
• You could use the :after pseudo element and to absolutely position it on the bottom right corner of your DIV

Example of that last one:

HTML:

<div class="ellipsis-div">
  <p>Long text Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<p>
</div>

CSS:

.ellipsis-div {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

.ellipsis-div:after {
    position: absolute;
    display: block;
    content: "...";
    bottom: 0;
    right: 0;
    background-color: white;
}

You will need to tweak the position of the :after element depending on your DIV's line-height, etc...