有时候我们只需要页面显示一行内容,又不想改后端程序,又不想用JS截取,那么有什么简单的办法让p标签里文字不换行,以省略号结束呢?

小白实测只需要几行css就可以实现,悄悄告诉你,不止p标签可以用哦,其余用法小伙伴们自行测试

//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
THE END

非特殊说明,本博所有文章均为博主原创

如若转载,请注明出处:https://www.htmlbk.com/web/603.html