1.一行显示并出现省略号
1）三个属性：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；
2）网上张大神想出来的margin-top负值的办法：
<div class="box">
<div class="wz">文字内容</div>
<div class="dot">...</div>
</div>
CSS:
.box{
width:设定宽度；
height:设定高度；
overflow:hidden;
}
.wz{
float:left;
height:设定同样的高度；
margin-right:这里的大小是给省略号留的空间；
}
.dot{
float:right;
width:刚才留的空间大小；
height：设定同样的高度；
margin-top:与高度一样的值的负数；
}
这种方法应该是兼容所有的浏览器。
还有用js或者插件来解决的方法，感觉有点麻烦。
2.两行显示，第二行出现省略号
当文字强制两行显示，并且在第二行才出现省略号。解决办法：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
兼容性不太好，多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。