修剪一个段落

Hi I'm trying to trim a paragraph. What I would like is to have 2 lines of text and when you click on the trimed content it expands and the rest of the content is shown.

This is my code

$str.=' <div class="page-heading">
        <span class="titlechange">'.$this->title.'</span>
        <div class="clearboth"></div>
    </div>';        
$str.='         
<div class="content-box-wrapper newsfeed">
<div class="content-box-container">';

    foreach($this->boxes as $box){

        if($htag > 6){
        $htag=6;
        }
        $str.='<div class="news-heading expand-next-content">';
        $str.='<div class="testimonial_content">';
        if( $box->image ) $str.= '<img class="floatleft" src="'.$_HTTP_ADDRESS."content_images/".$box->image.'" />';
            if( $box->title ){
            $str.= '<h'.$htag.'>'.$box->title.'</h'.$htag.'>';
            }

            if( $box->content ){
                if (stristr($box->content,'<p>')){
                    $str.= $box->content;
                }else{
                    $str.= '<p>'.$box->content.'</p>';
                }
            }
            $str.= '<div class="clearboth"></div>';
        $str.='</div>';


        $htag++;
        $str.='</div>';
    }

    $str.='</div>';
$str.='</div>';
$str.='     <div class="clearboth"></div>
</div>

I think you're using the wrong tool for the job.

Instead, do this on the client-side, which is pretty easy.

For example:

<div class="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.
</div>

CSS

.block {
    max-height: 3em;
    width: 20em;
    border: 1px solid red;
    overflow: hidden;
    transition: all 2s linear;
    -o-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;

}

.block.open {
    max-height: 100em;
}

JS

$('.block').on('click', function(e) {
    $(this).toggleClass('open')
})

This should even give you a fancy animated effect ...