Question

我希望缩短带有长文本的评论，并在剪切文字后面添加“... [显示完整帖子]”以展开完整帖子。由于我网站上的长篇评论通常是列表，因此最好在例如注释div中有5行，但不会破坏html，即p标记。

<html>
<head>

<style type="text/css">
    body {font-family:sans-serif; font-size:0.8em}
    .comments {border:1px solid #aaa; padding:5px; margin-bottom: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>

在此示例中，结果应为

这里有很长时间的评论

第3行中的文字
第4行中的文字
第5行中的文字...显示完整帖子

知道怎么做吗？

Answer 1

尝试使用CSS的overflow属性，然后检查Javascript，如果显示的高度等于定义的max-height并显示链接。

Answer 2

如果您设置div.commentpost p的css line-height属性，您将知道每条线的高度。然后，您可以将评论信息p的height设置为number of lines you want to see * lineheight并设置overflow:hidden并添加一个链接，其中包含切换溢出的点击处理程序。

这是一些伪代码：

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

如果我认为在jQuery中完成，那将是最简单的。

Answer 3

您可以通过设置text-overflow: ellipsis;来添加不带JavaScript的省略号，只需添加CSS {{1}}因为bug而在除Firefox之外的所有现代浏览器中都有效。

缩短div中每行的注释

3 个答案: