多行文本省略溢出内容 - Hide Overflow Content Multiple Line

div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1rem;
height: 3rem; /* 3 times line height */
}

p {
    position: relative;
    line-height: 1.4em; /* 3 times the line-height to show 3 lines */
    height: 4.2em;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}