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

方法一：

跨浏览器兼容的方案

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

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行隐藏就两倍，三行隐藏就三倍*/}