CSS样式:在固定宽度下,末尾处显示省略号

CSS样式:在固定宽度下,末尾处显示省略号

单行文本:在末尾处显示省略号

// 单行文本:在末尾处显示省略号
.类名{
	//宽,高,字体大小,这些自己设置
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

没有省略号的样子:

出现省略号的样子:

多行文本:在第几行的末尾处显示省略号,如下:

// 多行文本:在第几行的末尾处显示省略号
.类名{
	//宽,高,字体大小,这些自己设置
	width: 100px;
	height: 200px;
	// 多行文本溢出显示省略号
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	//在第几行出现省略号,数字就写几,我是第4行出现省略号,所以我写4
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	//设置了第几行出现省略号后,要添加行高为当前高度的几分之一,才会适配移动端.
	line-height: 50px;
}

一定得设置line-height属性的值哦!!!

多行文本_出现省略号的样子:

完结,撒花.
有问题请评论…
每天进步一点点…
对您有帮助的话,可以点赞,收藏哦,土豪可以随意打赏!