如何使用CSS实现多行文本的省略号显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; } .ellipsis:before { content:""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } </style> </head> <body> <div class="ellipsis" style="width: 500px;border: 5px solid #AAA;"> <div>http://www.cnblogs.com/accordion/p/6507320.html从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。 </div> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 如何使用CSS实现多行文本的省略号显示