1display: -webkit-box;
2-webkit-line-clamp: 3;
3-webkit-box-orient: vertical;
4overflow: hidden;
5text-overflow: ellipsis;
6
1html,body,p {
2 margin: 0;
3 padding: 0;
4 font-family: sans-serif;
5}
6.ellipsis {
7 overflow: hidden;
8 height: 200px;
9 line-height: 25px;
10 margin: 20px;
11 border: 5px solid #AAA;
12}
13.ellipsis:before {
14 content: "";
15 float: left;
16 width: 5px;
17 height: 200px;
18}
19.ellipsis > *:first-child {
20 float: right;
21 width: 100%;
22 margin-left: -5px;
23}
24.ellipsis:after {
25 content: "\02026";
26 box-sizing: content-box;
27 -webkit-box-sizing: content-box;
28 -moz-box-sizing: content-box;
29 float: right;
30 position: relative;
31 top: -25px;
32 left: 100%;
33 width: 3em;
34 margin-left: -3em;
35 padding-right: 5px;
36 text-align: right;
37 background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
38 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);
39 background: -webkit-gradient(linear,left top,right top,
40 from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
41 background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
42 background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
43 background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
44 background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
45 }
46