CSS 实现单行文字省略
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
CSS实现多行文字省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //显示文字的行数
overflow: hidden;
word-break: break-all;
多行文字省略插件:
//----------------- 单行文字省略CSS
p{
width: 400px;
border: 1px solid #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
//----------------- 多行文字省略CSS :ie不兼容
p {
width: 400px;
border: 1px solid #999;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //显示文字的行数
overflow: hidden;
word-break: break-all;
}
//----------------- html
<p>
那就随便说点什么吧,反正也只显示一行,可那也得多写点字呀,
要不字数可不就不够了,字数不够就看不出来情况了。嗯,这回感觉是差不多了,
看一下是不是只有一行吧
</p>