6

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

enter image description here

.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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
basZero
  • 4,129
  • 9
  • 51
  • 89
  • 2
    Check this out: http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines – Praveen Kumar Purushothaman Feb 01 '16 at 15:13
  • Thanks @PraveenKumar, but that question is 4 years old. I hope modern browsers have better support? – basZero Feb 01 '16 at 15:15
  • There's something called Line Clamping. See that: [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) - This would be effective for the modern browsers. `:)` – Praveen Kumar Purushothaman Feb 01 '16 at 15:16
  • Line Clamping (`-webkit-line-clamp`) is only supported by Chrome. As stated in my question, I need a solution for all browsers. – basZero Feb 01 '16 at 15:19
  • Just thought of giving that as a heads up for "modern browsers". Ah, unfortunately only Chrome. :( Sorry. – Praveen Kumar Purushothaman Feb 01 '16 at 15:19
  • 1
    There are a bunch of solutions to this on SO in addition to the one mentioned. Search for something like "multi-line ellipsis text" or something. Personally I like this answer: http://stackoverflow.com/questions/29160687/insert-ellipsis-after-specific-number-of-lines/29161423#29161423. Fundamentally, it cannot be done with CSS only. You will have to tweak the solution to avoid breaking in the middle of words but it's not rocket science. –  Feb 01 '16 at 15:37
  • 1
    Maybe this is useful to you: http://mattsnider.com/css-string-truncation-with-ellipsis/ – fnune Feb 01 '16 at 15:42
  • Possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – xianshenglu May 10 '18 at 09:29

2 Answers2

2

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

justinledouxweb
  • 1,337
  • 3
  • 13
  • 26
-4

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/

Sandeep
  • 1,461
  • 13
  • 26