Using text-overflow in css

Question

<div id="wrap">
    <p style="text-overflow:ellipsis;width:100%;"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

This is the html.

I would like to make a text that ends with ... when its size exceeds the size of its container. I learned from this example, but it doesnt work for me. I created a fiddle for you to try here.

I would like to acutally have multiple lines and then end in ..., when the text exceeds the size. Is that possible? I am having trouble with just one line anyway.

Answer 1

You need to put the white-space & overflow styles on the <p>, not the <div> (actually, you only need to move the overflow in, but it might be a good idea to keep them paired in a class instead of separate, since they go together in this context):

#wrap {
    width: 200px;
    background-color: red;
}

.ellipsis-overflow {
    text-overflow: ellipsis;
    width: 100%;   
    white-space: nowrap;
    overflow: hidden;
}

<div id="wrap">
    <p class="ellipsis-overflow"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

See it working here.

Answer 2

If you remove the P tag it will work or else place your styles on the P tag.

http://jsfiddle.net/BTCeY/11/

<div id="wrap">
    Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating. Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.
</div>

#wrap{
    width:200px;
    height: 200px;
    background-color:red;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    padding: 20px;
}