Question

嗨，我正试图修剪一个段落。我想要的是拥有2行文字，当你点击有趣的内容时，它会展开，其余的内容会显示出来。

这是我的代码

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

这甚至可以给你一种奇特的动画效果......

修剪一个段落

1 个答案: