ansaurus

Question

Answer 1

A:

Try using the overflow attribute of CSS and then check in Javascript, if the shown height equals the defined max-height and show the link.

levu 2010-10-31 14:27:09

This might be the easiest solution yeah. Thanks for all the ideas :)

Martin 2010-10-31 15:15:41

This is why I should not answer questions with people who don't have 100% accept rates. :/

apphacker 2010-10-31 16:14:30

I'm sorry, but the simpliest solution is often the best. Of course I should have come up with that idea myself but I didn't think of it and started from the complicated direction (javascript solution). And how should a new user have 100% acceptance?

Martin 2010-10-31 17:49:03

Answer 2

A:

If you set the css line-height property of div.commentpost p you will know how tall each line is. You can then set the height of commentpost p to to be the number of lines you want to see * lineheight and set overflow:hidden and add a link with a clickhandler that toggles the overflow.

Here's some psuedocode:

For Each div.commentpost => x
     if x.height > (max#lines * lineheight)
           x.height = (max#lines*lineheight)
           x.overflow = hidden
           x.insertAfter (new div(y))
           y.contents = a.link(onClick: (toggle(overflow.visible/overflow.hidden))
      end if
next div

It would be easiest if done in jQuery I think.

pinkfloydx33 2010-10-31 14:30:37

Answer 3

A:

You can add an ellipsis without JavaScript, just CSS, by setting text-overflow: ellipsis; Works in all modern browsers except Firefox due to a bug.

apphacker 2010-10-31 14:34:45

ansaurus

tags:

views:

answers:

Shorten comment per rows in div

related questions