文字单超出显示省略号
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; }