Ellipsis to truncate a long text

Question

I am using ellipsis concept to truncate a long text in my HTML. I have successfully managed to truncate the sentence but the "..." wont appear in my HTML. I use the following for the css

The output appears to be fine.. i.e., for test test test test test test test test test the out put is test test test when i actually want it as test test test...

<div style="text-align:left; line-height: 20px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; width: 99%;
            display : block;">

So what you're saying basically is that the page looks fine and the ellipsis is displayed, but taking a look at the page source, the html shows the entire text without the html? Is that it? — rikitikitik, Jun 19 '12 at 03:19
And by the way, his css disappeared due to html tags. This is what disappeared: `
` — rikitikitik, Jun 19 '12 at 03:20
Thanks..had been trying to include the code into the question.. :D — user1465233, Jun 19 '12 at 03:25
I am saying the page and output is fine but without ... after the truncated text. — user1465233, Jun 19 '12 at 03:27
[Works for me](http://jsfiddle.net/ExBWs/) (Opera 12). What browser in which version are you using? — Kijewski, Jun 19 '12 at 03:31
i use chrome(ful time) and explorer for testing.. doesn't work on chrome — user1465233, Jun 19 '12 at 03:41

score 7 · Answer 1 · answered Jun 19 '12 at 03:58

7

I'm not sure what you're asking, or what you are seeing, but the text will only be truncated if there's not enough space in the container. For example:

<style type="text/css">
div {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100px;
}
</style>
<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

http://jsfiddle.net/jS7ea/

Here I limited the div's width to 100px, and it displays just this:

Lorem ipsu...

On your example you have 99% width, so you'll only see the truncation if that's less than the actual content width (try resizing the browser window to check).

answered Jun 19 '12 at 03:58

bfavaretto

71,580
16
111
150

No i did try truncating upto 50% or even less. My question is i am unable to get the "..." appended to the truncated text as promised by ellipsis.. So instead of the result Lorem ipsu... i am getting only Lorem ipsu – user1465233 Jun 19 '12 at 04:04
1

Can you see the ellipsis in the jsfiddle I linked to? I can see it just fine on Chrome. – bfavaretto Jun 19 '12 at 04:07
1

Note that for content which lacks spaces, you may have to use "white-space: pre" instead, and set a maximum height for your element. I've used this CSS to successfully truncate some long URLs (in a RSS feeds) to a more reasonable length: {white-space: pre; text-overflow: ellipsis; overflow: hidden; max-width: 24em; max-height: 1.4em;} – Dr. Edward Morbius Dec 14 '13 at 11:38
is there a way to avoid `width: 100px;` the width should be calculated from its container. – Junle Li Jan 26 '15 at 05:54
@JunleLi yes you can omit the width property completely, in which case the width will be calculated from the container – Souhaieb Besbes Jun 01 '15 at 15:05

score 1 · Answer 2 · answered Oct 06 '15 at 10:35

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

you can also use … … (Horizontal Ellipsis) instead of 3 dots

source: http://html5hub.com/ellipse-my-text

Ellipsis to truncate a long text

2 Answers2

Linked