Fit text inside div

Question

How can i fit a large amount text a fixed size div.? i want when reach text maximum width of this div then break text with dots...

i tried this, i dont see the result really what i want

.description {
  max-width:590px;
  max-height:100px;
  float:left;
}

result what i got now

enter image description here

i want like this image

score 5 · Accepted Answer · edited May 23 '17 at 12:23

5

Give it a fixed width and use text-overflow CSS property width a value ellipsis

text-overflow: ellipsis;

Note: This will be effective only for a single line

If you want this should work on a multiple line, then you need to use jQuery

edited May 23 '17 at 12:23

Community

answered Nov 15 '12 at 09:14

Mr. Alien

your example its working a single line, if div width 400px; height 100px; how to fit.? – mans Nov 15 '12 at 09:23

kongaraju · Answer 2 · 2012-11-15T13:08:46.743

1

use text-overflow properties

text-overflow:ellipsis;

and you should keep.

overflow:hidden;
white-space:nowrap;

Here is a reference to use overflow content.

Here is a jquery plugin that handle multiple lines of text. One that seems to work is: http://pvdspek.github.com/jquery.autoellipsis/

edited Nov 15 '12 at 13:08

answered Nov 15 '12 at 09:15

kongaraju

This works, but he asked for multiple lines of text in a div not a single line in a list-item – Toby Nov 15 '12 at 12:56

2 Answers2