文本溢出省略号不适用于多行文本框

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...

Answer 2

show ... (ellipsis) for Chrome, Firefox, IE etc.

.truncate {
  width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

see this link: https://jsfiddle.net/n2Lvnqmc/3/