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.)


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 ..

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

much more variation for text-overflow visit here