①单行超出隐藏
p {
width: 200px; /* 宽度自定义 */
white-space: nowrap; /* 单行显示,不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis;/* 显示点 */
}
需要注意的是记得给宽度,不然达不到省略的效果
效果如下:
②多行超出隐藏
p {
overflow:hidden;
text-overflow:ellipsis;
/* 默认为1行,调整为2行加省略号 */
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
效果如下:
另外如何要强制单行显示的话,加如下就行
white-space:nowrap;