欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css 文本超出显示省略号 ...

程序员文章站 2022-04-22 16:07:46
...

超出1行显示…

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

超出2行显示…

.box{
	word-break: break-all;
	text-overflow:ellipsis;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;//超出第几行,关键在这里
	line-clamp:2;//超出第几行,关键在这里
}

超出3行显示…

.box{
	word-break: break-all;
	text-overflow:ellipsis;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;//超出第几行,关键在这里
	line-clamp:3;//超出第几行,关键在这里
}

结束

喜欢的可以点赞支持一下