文本溢出部分显示为省略号的不同方式

本文主要是介绍文本溢出部分显示为省略号的不同方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML代码：

<div><p class="p1">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。</p><p class="p2">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。</p><p class="p3">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。</p>
</div>

CSS代码：

/*1. 单行文本溢出用...显示*/
.p1 {width: 450px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
/*2. webkit的css扩展方法实现显示到多行文本中的第几行，隐藏部分用...显示
仅适用于webkit内核浏览器*/
.p2 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;/*text-overflow: ellipsis; 如果不显示...可加上该句*/
}
/*3. 通用 多行文本溢出隐藏部分显示为...*/
.p3 {height: 30px;border: 1px solid #000;line-height: 30px;overflow: hidden;position: relative;
}
.p3::after {content: "...";position: absolute;bottom: 0;right: 0;padding: 0 7px;background: #fff;
}