修剪一段

Question

嗨我想修剪一个段落。我想要的是有两行文字，当你点击它扩展的trimed内容，并显示其余的内容。

这是我的代码

$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> 

Answer 1

我认为您使用的是错误的工作工具。

相反，在客户端执行此操作非常简单。

例如：

<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') 
}) 

这甚至应该给你一个奇特的动画效果，...