1

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 ?

3 Answers 3

3

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/

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

Comments

2

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.

Comments

2

Add this to your css class:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.