昨天有个朋友问了一个问题，就是多行文字溢出最后用...替代，看了一下，以前做单行文字溢出，多行的还真没做过，所以自己也整了一哈，这里贴出来分享一下。
一、单行文本溢出
对于单行文本溢出 text-overflow: ellipsis 就能完美的解决，而且所有主流浏览器都支持 text-overflow 属性。这里不做过多的讲述。
这里写了一个demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试</title> <style> div{ width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div> 你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决 </div> </body> </html>
效果：
这里
overflow: hidden;
white-space: nowrap; //强制不换行
两段代码必须加上，否则的话是起不到作用的。
二、多行文本溢出
我在网上查阅了一下，找到了一些可以实现的方法，于是亲自实测一番。
1、伪元素（：after）实现方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div{
position: relative;
overflow: hidden;
200px;
height: 55px;
line-height: 30px;
font-size: 20px;
}
div:after{
position: absolute;
bottom: 0;
right: 0;
padding:0 5px 1px 45px;
content: '...';
background:url(ellipsis_bg.png) repeat-y;
}
</style>
</head>
<body>
<div>
你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决你懂不懂我的心，其实我就是想试试两行要怎么解决
</div>
</body>
</html>
测试结果如下:
