css实现的3种省略方式

css实现的3种省略方式

公共:

body{
				max-width: 500px;
				margin: 20px auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.ellipsis-text {
				line-height: 30px;
				font-size: 20px;
			}

			.s-line {
				width: 200px;
			}

1.单行省略

<p class="ellipsis-text s-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>

.sl-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

2.多行省略

<p class="ellipsis-text m-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>

.ml-ellipsis {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

3.伪类省略

<p class="ellipsis-text m-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	

.mls-ellipsis {
	overflow: hidden;
	position: relative;
	max-height: 90px;
}

.mls-ellipsis:after {
	position: absolute;
	right: 0;
	bottom: 0;
	padding-left: 40px;
	background: linear-gradient(90deg, transparent, #fff 50%);
	content: "...";
}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/718

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！