1、单行超出
.text-overflow{
width:300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
2、多行超出
.more-overflow{
display:-webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 几行超出隐藏就写几 */
}
前两种方式都是整行超出判断,适用于商品名称、整行新闻标题等等情况,但是日常生活中经常会见到这种:
3、利用js截取字数控制超出
if(content.length>140){
content=content.slice(0,140)+" ...全文";
}
“…全文”可根据自己的项目书写格式,不是非要拼接在后面。