CODEWITHSUNDEEP
htmlcss
Priyanka
Priyanka

Reputation: 2832

How text overflow end with dots in css2 should be done?

how text overflow end with the dots in css2? Design that i done is as follows-

<div class="container">
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">Address</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("Address")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">City</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("City")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">State</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("State")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">PIN</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("PostalCode")%></span></div>
    </div>

css is as follows-

.container 
{
    background:#EFF2F7;
    float:left;
    margin:0px 15px 10px 0px;
    border:1px solid #768BB7;
    max-width:23%;
    min-width:22%;
    max-height:120px;
    min-height:100px;
    padding-left:2px;
}

Upvotes: 2

Views: 4523

Answers (3)

Jasmeet Singh
Jasmeet Singh

Reputation: 2548

just a quick pointer, if you try to use 

overflow: hidden;
text-overflow: ellipsis;

on a table, they won't work until you set

table-layout:fixed property on the table tag.

Upvotes: 1

Chris Morgan
Chris Morgan

Reputation: 90762

You can't do it in CSS Level 2 or 2.1. You can only do it in CSS 3. Browser support is good, though, including back to IE6: https://developer.mozilla.org/en/CSS/text-overflow

overflow: hidden;
text-overflow: ellipsis;

Upvotes: 11

avramov
avramov

Reputation: 2114

I don't know why you'd want to stick to CSS2, but I'd suggest this:

.container { position: relative; }
.ellipsis  { position: absolute; bottom: 0; right: 0 }

<div class="container">
    Text goes here.
    <div class="ellipsis">...</div>
</div>

Of course, this only gives you a box with three dots in the bottom right corner of your container DIV, but that's as far as you can go without using JavaScript.

Upvotes: 0

Related Questions