CODEWITHSUNDEEP
jqueryhtmlcss
mans
mans

Reputation: 1087

Fit text inside div

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

Upvotes: 2

Views: 2600

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157314

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

Demo

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

Demo(Source)

Upvotes: 5

kongaraju
kongaraju

Reputation: 9596

use text-overflow properties

text-overflow:ellipsis;

and you should keep.

overflow:hidden;
white-space:nowrap;

Here is a reference to use overflow content.

https://developer.mozilla.org/en-US/docs/CSS/text-overflow

DEMO

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

An example: http://jsfiddle.net/VpmbL/

Upvotes: 1

Related Questions