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.