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

前端之家收集整理的这篇文章主要介绍了HTML5 文本内容显示三行,多余部分显示...,点击全部展开前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣HTML5 文本内容显示三行,多余部分显示...,点击全部展开的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。<br>
CSS部分:
.mui-ellipsis-3 {
    display: -webkit-Box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-Box-orient: vertical;
}
.innerCtn{
text-indent: 1rem;
line-height: 0.8rem;
font-size: 0.5rem;
}


HTML部分
<div class="innerCtn">
<span class="mui-ellipsis-3">《心理游戏》是由Propaganda Films发行的悬疑电影,由大卫·芬奇执导,迈克尔·道格拉斯、西恩·潘领衔主演,
该片于1997年9月12日在美国上映。该片讲述了亿万富翁尼古拉斯在弟弟的指引下,参与了CRS俱乐部的游戏。</span>
</div>


jQuery部分代码
<script type="text/javascript">
$(function(){//显示三行 多余隐藏 点击展开
$('.innerCtn').click(function(){
$(this).children(0).removeClass('mui-ellipsis-3');
});
}); 
</script>
 

猜你在找的HTML相关文章