Truncating text inside a div [duplicate]

Answer 1

Apart from ellipsis, I would suggest display the whole text on mouse hover using tooltip.

fiddle

Answer 2

Use these styles:

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/

Answer 3

You should look at css ellipsis : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 4

I would suggest Trunk8

You can then make any text fit to the size of the div, it trims the text that would cause it to go beyond 1 line (options are available to set amount of lines allowed)

E.g

$('.truncate').trunk8();