Text overflow end with three dots (…)

You are making a web application you have user name area and it’s css is like ;

(dummy css. The matter is here your username div has a width size.)

div.username{
width:40px;
height:20px;
.
.
.}

Your username div contains 25 character. When user changed his/her username to longer something. Now you have a problem. At this point you need to cut the text with three dots or something you want. You can write a helper method for this situation. Cut the character 25, but every character has different width and this solution is not efficient. You can use this css for text overflow ..

.cutLongText{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;   /*or your div width */
overflow: hidden;}

much more variation for text-overflow visit here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s