19 文字单超出显示省略号

    div {
    	width: 200px;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    }

文字多行超出显示省略号

    div {
    	width: 200px;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 3;
    	overflow: hidden;
    }

该方法适用于WebKit浏览器及移动端。

跨浏览器兼容方案：

    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;
    }