Shorten comment per rows in div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-22 14:14 出处：网络

I want to shorten comments with long text and add a \"... [show full post]\" behind the cut text to expand the full post.

相关专题：javascript

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 post

Any 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.