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

最新推荐文章于 2022-10-20 20:18:59 发布

每一天，每一步

最新推荐文章于 2022-10-20 20:18:59 发布

阅读量97

点赞数

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/u010234868/article/details/115406452

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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;
}