css how to implement multi-line text field using div with ellipsis [duplicate]

Question

Possible Duplicate:
Insert ellipsis (…) into HTML tag if content too wide
With CSS, use “…” for overflowed block of multi-lines

Hi I am trying to have a div tag to display a question this div box is constrained by size, because of the lay out specification this div tag should show as much text as it can, if it can't show all, it should have ellipsis (i.e. .....) at the end

currently i want it to display maximum 3 lines in that div

if it is more than 3 lines, than it will show ellipsis

example:

This is a question, from follow student who attended...

my current style for that div tag is the following:

 .question { max-height: 40px; max-width:200px text-overflow: ellipsis; overflow: auto; }

this doesn't do the trick... please help

Multiline isn't supported. You will need javascript to support this. See these two SO questions. stackoverflow.com/questions/6222616/… and stackoverflow.com/questions/536814/… — mrtsherman
– mrtsherman, Commented Mar 21, 2012 at 3:39
Put a jsfiddle or any working example, this will be easy to encounter real problem — Jack
– Jack, Commented Mar 21, 2012 at 6:07

theonova · Accepted Answer · 2012-03-21 03:38:32Z

1

Add "overflow: hidden" to the above

answered Mar 21, 2012 at 3:38

theonova

312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1118019 Over a year ago

that didn't fix it sir. it only shows the letters that can fit in the box, rest are 'hidden', no ellipis shown

Eric Rowell Over a year ago

This cannot be done with pure CSS. You'll need JavaScript to do multi-line ellipsis on the client side. There's lots of jQuery plugins available that do this today.

Collectives™ on Stack Overflow

css how to implement multi-line text field using div with ellipsis [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related