文本内容显示三行，多余部分显示...，点击全部展开

1.png

<h4>CSS部分</h4>
<pre>
.mui-ellipsis-3 {
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

        }
        
        .innerCtn {
            text-indent: 1rem;
            line-height: 0.8rem;
            font-size: 0.5rem;
        }

</pre>
<h4>HTML部分</h4>
<pre><div class="innerCtn">
<span class="mui-ellipsis-3">《心理游戏》是由Propaganda Films发行的悬疑电影，由大卫·芬奇执导，迈克尔·道格拉斯、西恩·潘领衔主演，
该片于1997年9月12日在美国上映。该片讲述了亿万富翁尼古拉斯在弟弟的指引下，参与了CRS俱乐部的游戏。</span>
</div>
</pre>
<h4>jQuery部分代码：</h4>
<pre>
<script type="text/JavaScript">$(function(){
//显示三行 多余隐藏 点击展开
$('.innerCtn').click(function(){$(this).children(0).removeClass('mui-ellipsis-3');});});
</script>
</pre>

Screenshot_20170302-082135.png