HTML5文本内容显示三行多余部分显示省略号代码办法

这篇文章主要为大家详细介绍了HTML5文本内容显示三行多余部分显示省略号代码办法，可以用来参考一下。

.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;
}

<div class="innerCtn">
<span class="mui-ellipsis-3">
文字内容，
HTML5文本内容显示三行多余部分显示省略号代码办法一；
HTML5文本内容显示三行多余部分显示省略号代码办法二；
HTML5文本内容显示三行多余部分显示省略号代码办法三。
</span>
</div>

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

注：关于HTML5文本内容显示三行多余部分显示省略号代码办法的内容就先介绍到这里