CODEWITHSUNDEEP
htmlcss
Borut Flis
Borut Flis

Reputation: 16415

Using text-overflow in css

<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.

Upvotes: 1

Views: 250

Answers (2)

Billy Moat
Billy Moat

Reputation: 21050

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;
}

Upvotes: 0

Andrew Marshall
Andrew Marshall

Reputation: 97004

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.

Upvotes: 4

Related Questions