Shorten comment per rows in div
<p>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.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;

&lt;style type="text/css"&gt;
    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}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="comments"&gt;
&lt;div class="commenttop"&gt;&lt;div class="username"&gt;User 1&lt;/div&gt;
&lt;div class="date"&gt;12:12, 28 October 2010 (CEST)&lt;/div&gt;&lt;/div&gt;
&lt;div class="commentpost"&gt;
&lt;p&gt;Very long comment here&lt;br /&gt;
&lt;br /&gt;
Text in row 3&lt;br /&gt;
Text in row 4&lt;br /&gt;
Text in row 5&lt;br /&gt;
Text in row 6&lt;br /&gt;
Text in row 7&lt;br /&gt;
Text in row 8&lt;br /&gt;
Text in row 9&lt;br /&gt;
Text in row 10&lt;br /&gt;
Text in row 11&lt;br /&gt;
Text in row 12
&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;div class="comments"&gt;
&lt;div class="commenttop"&gt;&lt;div class="username"&gt;User 2&lt;/div&gt;
&lt;div class="date"&gt;17:22, 30 October 2010 (CEST)&lt;/div&gt;&lt;/div&gt;
&lt;div class="commentpost"&gt;
&lt;p&gt;Text in row 1&lt;br /&gt;
Text in row 2
&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In this example the result should be</p>

<hr>

<p>Very long comment here</p>

<p>Text in row 3<br>
Text in row 4<br>
Text in row 5 ... show full post</p>

<hr>

<p>Any idea how to do that?</p>
