16

In my webpage I have a div with fixed width and using the following css:

width: 200px; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.

For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."

Zeux
  • 372
  • 1
  • 4
  • 12

4 Answers4

6

I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
5

Of course it's possible. (If you're willing to change your markup a bit.)

https://jsfiddle.net/warphLcr/

<style>
  .foo {
    /* Make it easy to see where the cutoff point is */
    border: 2px solid #999;

    padding-right: 18px; /* Always have room for an ellipsis */
    width: 120px;
    height: 1.1em; /* Only allow one line of text */
    overflow: hidden; /* Hide all the text below that line */
    background-color: #fff; /* Background color is required */
  }
  .foo > span {
    display: inline-block; /* These have to be inline block to wrap correctly */
    position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
    background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
    white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
  }
  .foo > span:after {
    position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
    content: "…"; /* Each span has an ellipsis */
  }
  .foo > span:last-child:after {
    content: ""; /* Except for the last one */
  }
</style>

<div class="foo">
  <!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
  <span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
Hunter Perrin
  • 243
  • 3
  • 5
  • That code didn't ellipsize one big long word that overflows. So if you want to do that, wrap each word in another span (so each word is inside two spans), and add this code: – Hunter Perrin Nov 18 '16 at 17:54
  • .foo > span > span { /* You have to use two spans if you want an ellipsis for one giant word */ display: inline-block; max-width: 100%; overflow: hidden; } .foo > span { max-width: 100%; ... [the rest of the code] – Hunter Perrin Nov 18 '16 at 17:56
  • 1
    I appreciate people who find solutions to "impossible" problems. – aero May 15 '18 at 19:13
  • 1
    This is amazing. It works great, and was just what I was looking for. It allows me to do two things: 1) have the effect of `text-overflow: ellipsis` without breaking words, and (2) put a comma at the beginning of the span, so that the word list does not end with `, ...`. Brilliant. Thank you. – Timothy Zorn Jul 04 '20 at 17:27
0

There's a jQuery plugin that does this, called dotdotdot.

It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html

Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.

But 99% of the time, the plugin seems fast and robust.

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
0

If you want to display one line of text that would end in ellipsis, like a news ticker for example, just do:

p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Manny Alvarado
  • 1,135
  • 9
  • 14