单行文本
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
多行文本
1.直接用css属性设置（适用于移动端）
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;//表示行数
-webkit-box-orient:vertical;
2.利用伪类（多浏览器兼容）
<div id="con">
<span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
<span class="t"></span>
</div>
<style>
#txt{
display: inline-block;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
font-size: 16px;
}
.t:after{
display: inline;
content: "...";
font-size: 16px;
}
</style>
3.利用绝对定位和padding（跨浏览器解决方案）
<p id="con2">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略<span class="t2">...</span>
</p>
<style>
#con2{
position: relative;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
padding-right: 12px;
}
.t2{
position: absolute;
right: 0;
bottom: 0;
}
</style>
