固定宽的块元素内多行或单行超出内容用省略号...显示，超出规定行数，即显示省略号...

快速使用：

 .nowrap{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 
.nowrap_2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.nowrap_3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.nowrap_4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}

 

代码示例：

<div 
style="position:absolute;left:20px;bottom:20px;background:rgba(255,255,0,0.5);color:#333;width:600px;padding: 10px;">
  <div style="overflow:hidden;text-overflow:ellipsis;height:auto;font-size:14px;-webkit-box-orient: vertical;-webkit-line-clamp:4;display:-webkit-box;">{{ detailsImage.describe}}</div>
</div>

内容超过4行的效果：

内容不足4行的效果：