paragraph dots after 2 lines css

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