CSS多行文本省略 私有属性和伪元素

私有属性:
优点:简洁明了
缺点:私有属性 有比较大的局限性

.box{
	width: 300px;
	height: 90px;
	border:1px solid #ccc;
	font-size: 16px;
	overflow:hidden; // 多余隐藏
	display:-webkit-box; // 自适应布局 和flexbox有点像 可以设置盒子内部元素的排列方向
	-webkit-box-orient:vertical; // 文本从上至下 垂直方向
	-webkit-line-clamp:4; // 设置第几行开始省略
}

伪元素1:
优点:css规范 不用担心私有属性跨浏览器的问题
缺点:如果背景不是纯色 就比较难处理

.box{
	height: 90px;
	width: 300px;
	border:1px solid #ccc;
	font-size: 16px;
	overflow: hidden;
	position: relative;
	padding-right: 1em;
	text-align: justify;
}
.box::before{
	content: "...";
	position: absolute;
	right: 0;
	bottom: 0;
}
.box::after{
	content: "";
	background-color: #fff;
	width: 1em;
	height: 1em;
	position: absolute;
	display: inline;
	right: 0;
	margin-top: 0.5em;
}

伪元素2: 相比上面那种 这种比较有创意
优点:css规范 不用担心私有属性跨浏览器的问题
缺点:如果背景不是纯色 就比较难处理

.box{
	height: 90px;
	width: 300px;
	border:1px solid #ccc;
	font-size: 16px;
	overflow: hidden;
	position: relative;
	text-align: justify;
}
.box::after{
	content: "";
	position: absolute;
	height: 1.2em;
	width: 20%;
	background: linear-gradient(to right, rgba(255,255,255,0),blue 80%);
	right: 0;
	bottom: 0;
	margin-bottom: 0.2em;
}