可以用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 (只能在半角空格或连字符处换行);