修剪一段

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

這甚至應該給你一個奇特的動畫效果，...