本文共 512 字，大约阅读时间需要 1 分钟。

文字单超出显示省略号

div {	width: 200px;	overflow: hidden;	white-space: nowrap;	text-overflow: ellipsis;}

文字多行超出显示省略号

div {	width: 200px;	display: -webkit-box;	-webkit-box-orient: vertical;	-webkit-line-clamp: 3;	overflow: hidden;}

该方法适用于WebKit浏览器及移动端。

跨浏览器兼容方案：

p {    position:relative;    line-height:1.4em;    /* 3 times the line-height to show 3 lines */    height:4.2em;    overflow:hidden;}p::after {    content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;}

转载地址：https://blog.csdn.net/yyychocolate/article/details/108571545 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！