单行文本超出打点:
{
overflow:hidden; /* 超出部分隐藏 */
white-space: nowrap; /* 文本不换行 */
text-overflow:ellipsis;/* 省略的文本用省略号表示 */
}
多行文本超出打点:
不考虑兼容性的情况下:
{
-webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/
display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式*/
overflow: hidden;
word-break: break-all;
}
可以使用下面的网站查看兼容性
但是这种写法的兼容性不太能接受
跨浏览器的写法:
var maxwidth = 35; // 允许接受的字符数
if($('div').text().length > maxwidth){
//截取字符串
$(this).text($(this).text().substring(0,maxwidth));
//多余的用省略号显示
$(this).html($(this).text()+'...');
}