Web前端开发资源网可以用JQuery插件更好的实现文本溢出隐藏效果，可以访问：jQuery.dotdotdot多行文本省略号插件的使用方法
在CSS3中可以使用 text-overflow 对文本溢出进行处理：
clip :（默认值），文本溢出部分裁切。
ellipsis : 溢出显示 ...
tip : 设置 ellipsis 时需将给元素设置 overflow: hidden; 和 white-space: nowrap; ，仅限于单行文本溢出。
代码如下：
.page1{
width: 300px;
height: 16px;
border: 1px solid cyan;
line-height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}WebKit内核的浏览器可以设置 -webkit-line-clamp: number; 实现在第几行末尾显示省略号。
对应的firefox可以使用 -moz-appearance 属性。
代码如下：
.page2{
width: 300px;
height: 65px;
border: 1px solid cyan;
overflow: hidden;
/*line-height: 15px;*/
text-overflow: ellipsis;
display: -webkit-box;
/*重新定义-webkit私有盒模型*/
-webkit-box-orient: vertical;
/*内容之间的排列顺序，vertical垂直方向排列*/
-webkit-line-clamp: 3;
/*在第几行末尾显示省略号...*/
word-break: break-all;
}-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
必须结合 display: -webkit-box; 和 -webkit-box-orient 属性。
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 vertical 是代表垂直排列。
word-break: break-all; 规定自动换行的处理方法。normal （浏览器默认的换行规则）| break-all （允许在单词内换行）| keep-all （只能在半角空格或连字符处换行）;
未经允许不得转载：Web前端开发资源网 » 用css实现文本溢出 超出部分隐藏显示省略号
推荐阅读：