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

Chris Morgan · Accepted Answer · 2011-11-24 10:13:03Z

11

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;

edited Nov 24, 2011 at 10:13

answered Nov 24, 2011 at 10:00

Chris Morgan

91.6k28 gold badges217 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bojangles Over a year ago

Curiously, Mozilla's own examples don't work for me in Firefox 8.0. Can anyone confirm?

Priyanka Over a year ago

I want to use only css2. Is there any other solution on this?

Chris Morgan Over a year ago

@Priyanka: "You can't do it in CSS Level 2 or 2.1." It wasn't there back then. Why should you care about which version it was introduced in, anyway? Here's a CSS3 feature that was introduced in IE6 (before CSS3), while my recollection is that there are still one or two CSS2 features with poor browser support. Care about browser support, not when it was introduced into a standard.

Chris Morgan Over a year ago

@JamWaffles: I'm currently on 7, but if it's the same as 8 (the "ellipsis" example appearing as …345…, that's because the span has a margin-left: -2px, leading to the 12 being ellipsised. Whether or not that's correct behaviour, I don't know. It seems correct to me (overflow should be hidden, so ellipsise at start and end). Also, some things have been changed in Firefox 9.

avramov Over a year ago

As far as I know, there isn't such a thing as ".net 2010". Elaborate. If you mean ASP.NET, it only cares for the server side of things, and doesn't in any manner stop you from using CSS 3.

Jasmeet Singh · Accepted Answer · 2014-05-16 00:14:32Z

1

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.

answered May 16, 2014 at 0:14

Jasmeet Singh

2,5671 gold badge13 silver badges10 bronze badges

Comments

avramov · Accepted Answer · 2011-11-24 10:09:32Z

0

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.

answered Nov 24, 2011 at 10:09

avramov

2,1142 gold badges18 silver badges41 bronze badges

2 Comments

Priyanka Over a year ago

I don't want only dots , the overflow of text should be hidden & it should show dots at the end.

avramov Over a year ago

Then, just use overflow: ellipsis. It is well-supported, and that's the only thing that matters.

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related