Shorten comment per rows in div
I want to shorten comments with long text and add a "... [show full post]" behind the cut text to expand the full post. Since long comments on my site usually are lists it may be best to cut them after e.g. 5 rows inside the comment div, but without breaking the html, i.e. the p tag.
<html>
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:0.8em}
.comments {border:1px solid #aaa; padding:5px; margin-bo开发者_如何学Gottom:10px}
.commenttop {background-color:#f9f9f9; padding:5px}
.username {float:left; margin-right:10px; font-weight:bold}
.commentpost {padding:0 5px}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="comments">
<div class="commenttop"><div class="username">User 1</div>
<div class="date">12:12, 28 October 2010 (CEST)</div></div>
<div class="commentpost">
<p>Very long comment here<br />
<br />
Text in row 3<br />
Text in row 4<br />
Text in row 5<br />
Text in row 6<br />
Text in row 7<br />
Text in row 8<br />
Text in row 9<br />
Text in row 10<br />
Text in row 11<br />
Text in row 12
</p>
</div></div>
<div class="comments">
<div class="commenttop"><div class="username">User 2</div>
<div class="date">17:22, 30 October 2010 (CEST)</div></div>
<div class="commentpost">
<p>Text in row 1<br />
Text in row 2
</p>
</div></div>
</body>
</html>
In this example the result should be
Very long comment here
Text in row 3
Text in row 4 Text in row 5 ... show full postAny idea how to do that?
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.
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.
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.
加载中,请稍侯......
精彩评论