一、单行文本溢出显示省略号(…)
width:200px;
display: block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
二、多行文本溢出显示省略号(…)
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
width:100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。