方法一：

跨浏览器兼容的方案

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

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