HTML CSS how to adapt text on a Div's size

Question

I want to put a big text into a smal div, and I want that the div doesn't resizing but just doesn't show all the text.

For exemple the orginal Div's dimension are height:40px; width:100px;

This image will help you to understand what I mean

Thanks you

I've tried a lot of ways but didn't works

Related: http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet — Benjamin Gruenbaum, Jun 14 '13 at 14:44
Have you tried anything yet? sometimes it's more helpful if we can see your current thought process on how you think this should be solved, then we can steer you back on track, or show you the small mistakes. — rlemon, Jun 14 '13 at 14:45
@rlemon don't you think that the "WHAT IT DOES" part in my IMAGE represent what I 've tried ? don't you think ? really ? do you realize what you are asking to me ? — LeSam, Jun 14 '13 at 14:52
@user2372006 let me clarify: Have you tried to produce any code to facilitate your needs? If you have we would very much like to take a look at it to see how close to a solution you may be at. If you have not tried any solution then you can also tell us that. Your attitude and (seeming) rage on the entire issue does not bode well for you, and you should probably check that at the door. — rlemon, Jun 14 '13 at 15:31

score 3 · Answer 1 · answered Jun 14 '13 at 10:06

Using text-overflow: ellipsis will just work on single line text. There's a little trick to fake that with multiple-lines using just CSS: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

There's also a nice jQuery plug-in just in case you are using jQuery: http://pvdspek.github.com/jquery.autoellipsis/

score 2 · Answer 2 · answered Jun 14 '13 at 10:05

2

You need to use 'overflow' property of css. More on this here.

answered Jun 14 '13 at 10:05

Darshan Mehta

it could be a good idea but I want the "dots" like this "..." because for some Layout's reason it's more beautiful – LeSam Jun 14 '13 at 10:10
Instead of using "..." scroll bar should be used. In case of "...", user will not be able to read the whole message even if he knows that the message displayed in div is clipped. – Darshan Mehta Jun 14 '13 at 10:15
I know but I have a button next to the text like "See more". that's why I need the dots. – LeSam Jun 14 '13 at 10:16
And I don't want to write manually the "..." for some modular reasons – LeSam Jun 14 '13 at 10:18
2

This link provides describes functionality which you require. http://thepugautomatic.com/octopress/2008/02/jquery-html-truncate/ – Darshan Mehta Jun 14 '13 at 10:25
it's really good but I have an external link, so it's not efficiant for me. Thanks you anyways – LeSam Jun 14 '13 at 10:54

score 2 · Accepted Answer · answered Jun 14 '13 at 10:17

2

use jquery dotdotdot plugin to achieve this for multi lines. If it is for single line then it can be easily done with CSS alone.

$("div").dotdotdot()

Here is the LINK for dotdotdot plugin

answered Jun 14 '13 at 10:17

Sowmya

3 Answers3