CODEWITHSUNDEEP
javascriptjquerycss
HackerManiac
HackerManiac

Reputation: 243

Overflow hidden if text length increases jquery

see this fiddle first hand!.

What i have is a div with a string. Now whenever i hover the .dots it makes its text inside bolder which increases its length or size . I want something like if the text size increases then it should not dissapear like overflow:hidden but show appear followed by 3 dots. for example look at this image........

1

since the name is too long it appears followed be dots. How can i possibly do that ?

Upvotes: 1

Views: 378

Answers (3)

Sten Pelzer
Sten Pelzer

Reputation: 512

It's a very easy solution. Just add this to your .dots css :

white-space: nowrap;
text-overflow: ellipsis;

So your css looks like this:

.dots {
    height:20px;
    width:150px;
    background:#fff;
    border:1px solid #DDD;
    color:#333;
    overflow:hidden;
    padding:2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

See the fiddle i made.

Upvotes: 2

Jai
Jai

Reputation: 74738

Add this to your css class:

    .dots {
          .....
        overflow:hidden;
        padding:2px;
        text-overflow: ellipsis; // required
        white-space: nowrap; // required
    }

Upvotes: 2

K K
K K

Reputation: 18099

Try text-overflow:ellipsis; and white-space:nowrap

.dots {
 height:20px;
 width:150px;
 background:#fff;
 border:1px solid #DDD;
 color:#333;
 text-overflow:ellipsis;
 overflow:hidden;
 padding:2px;
 white-space: nowrap;
}

Demo: http://jsfiddle.net/lotusgodkk/K655K/1/

Upvotes: 3

Related Questions