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

Question

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

Answer 1

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;