昨天有個朋友問了一個問題，就是多行文字溢出最后用...替代，看了一下，以前做單行文字溢出，多行的還真沒做過，所以自己也整了一哈，這里貼出來分享一下。
一、單行文本溢出
對於單行文本溢出 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;
width: 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>
測試結果如下:
