get "..." continuation for white-space nowrap style

Question

I am applying white-space: nowrap successfully on a piece of text. I am wondering whether it is possible to get a standard "..." at the end of the piece of text IF it is truncated by the nowrap style. Is this something CSS can take care of? Or do I need javascript?

Thanks.

score 1 · Accepted Answer · answered Jan 13 '12 at 01:07

Firefox (and possibly a few others) support:

text-overflow: ellipsis;

but it's not cross-browser by any means. In order to get something cross-browser you need to use javascript. One way I've done this in the past is:

<div class="text">
    text goes here
    <div class="ellipsis">...</div>
</div>

.text {
    position : relative;
}

.text .ellipsis {
    display : none;
}
.text.long .ellipsis {
    display    : block;
    position   : absolute;
    right      : 0px;
    background : #FFF;
}

then your js is simply something like this (using jQuery):

$( '.text' ).each( function(){
    var $this = $( this );
    $this[ ( $this.width() > $this.outerWidth() ) ? 'addClass' : 'removeClass' ]
        ( 'long' );
} );

score 0 · Answer 2 · edited May 23 '17 at 10:32

Assuming browser support, it may not work for another seemingly unrelated reason.
Preconditions: your text content is inside a containing block whose style is
overflow:hidden, whitespace:nowrap and text-overflow:ellipsis
My observation has been, the position property of that containing block must be "relative". The ellipses don't show if its absolutely positioned, the text simply gets clipped.

the answer here nails it absolute vs relative position width & height

get "..." continuation for white-space nowrap style

2 Answers2