设置多行文本超出显示省略号，在手机端超出部分无法隐藏解决方法

方法一：

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p{
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}

p::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:020px1px45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

但是效果不好看

方法二：

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

但是会出现BUG，会出现超出部分溢出不影藏

结果：我综合了两种方法如下。给给定换行数，同时给定高度和行高限制。

html:

<div class="caption">
<p>显示超过两行就显示省略号，其余隐藏，隐藏不了的情况下给这个模块添加一个高度和行高

，高度是行高的两倍</p>
</div>

css:

.caption {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #999999;
line-height: 15px;//
height:30px;///* 2行隐藏就两倍，三行隐藏就三倍*/
}