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

内容摘要
这篇文章主要为大家详细介绍了HTML5 文本内容显示三行，多余部分显示...，点击全部展开，具有一定的参考价值，可以用来参考一下。

感兴趣HTML5 文本内容显示三行，多余部分显示...，点
文章正文

这篇文章主要为大家详细介绍了HTML5 文本内容显示三行，多余部分显示...，点击全部展开，具有一定的参考价值，可以用来参考一下。

感兴趣HTML5 文本内容显示三行，多余部分显示...，点击全部展开的小伙伴，下面一起跟随php教程的小编罗X来看看吧。<br>CSS部分：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<code class="language-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;
}</code>
HTML部分
1
2
3
4
<code class="language-html"><div class="innerCtn">
<span class="mui-ellipsis-3">《心理游戏》是由Propaganda Films发行的悬疑电影，由大卫·芬奇执导，迈克尔·道格拉斯、西恩·潘领衔主演，
该片于1997年9月12日在美国上映。该片讲述了亿万富翁尼古拉斯在弟弟的指引下，参与了CRS俱乐部的游戏。</span>
</div></code>
jQuery部分代码：
1
2
3
4
5
6
7
<code class="language-javascript"><script type="text/javascript">
$(function(){//显示三行 多余隐藏 点击展开
$('.innerCtn').click(function(){
$(this).children(0).removeClass('mui-ellipsis-3');
});
}); 
</script></code>

注：关于HTML5 文本内容显示三行，多余部分显示...，点击全部展开的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇Vue2.x中的父组件传递数据至子组件的方法下一篇vue 请求后台数据的实例代码

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！