Text overflow elipsis

Question

I am trying to add an ellipsis at the end of my text if it is too long.

The css i am currently using is:

style='text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'

My current text should flow over a few lines, to fill the div and then have the ellipsis, however, this css is cutting the text off at the end of the first line. how do i make the ellipsis appear only when the div is filled with text?

example:

This is what i want;

"This is an example bit of text
that should go over multiple lines..."

This is what i am getting;

"This is an example bit of text...

Thanks.

It won't work without some Javascript fiddling, because the `white-space` setting you need to create an ellipsis only allows one line. — Jesse, Jan 24 '18 at 12:51
@Darryl Whalley white-space : nowrap; doesn't cut texts. you try white-space: initial; — Ragu, Jan 24 '18 at 14:15

score 0 · Accepted Answer · answered Jan 24 '18 at 12:49

0

text-overflow:ellipsis only works on a single line of text. explained here.. I would recommend playing with JS.. like the article suggests. Where you can append the ellipsis, when the maximum characters allowed had been reached.

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

answered Jan 24 '18 at 12:49

Renzo Calla

7,486
2
22
37

excellent, thank you for your answer – Jan 24 '18 at 15:45

Text overflow elipsis

1 Answers1