Overflow text ellipse does not work for multi-line text fields

Question

Why is it so hard to do this:

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

The following JSFiddle shows a demo.

Questions

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

An example :

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

 .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 way to cross-browser. However, there are some tips you could try:

• Estimate the number of characters that fit into your DIV, crop the text to the desired length and add an ellipse to the end
• You can use the :after pseudo-element and completely place it in the lower right corner of your DIV

An example of the latter:

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 adjust the position of the :after element depending on the height of the DIV line, 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/