【iCSS：布局】使用text-overflow控制文本溢出

icss-text-overflow.markdown

【iCSS：布局】使用text-overflow控制文本溢出

A Pen by JowayYoung on CodePen.

License.

index.html

<div class="bruce flex-ct-y">
	<p class="single-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>
	<p class="multiple-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	<p class="multiple-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>

style.scss

p[class*=-line] {
	line-height: 30px;
	font-size: 20px;
}
.single-line {
	width: 200px;
}
.multiple-line {
	margin-top: 10px;
	width: 400px;
	text-align: justify;
}
.sl-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-ellipsis {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
}
.mls-ellipsis {
	overflow: hidden;
	position: relative;
	max-height: 90px;
	&::after {
		position: absolute;
		right: 0;
		bottom: 0;
		padding-left: 40px;
		background: linear-gradient(to right, transparent, #fff 50%);
		content: "...";
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />