纯CSS让文字行数限制超出显示省略号

直接用CSS来控制文字或字符的整行,比如先在父级控制一个绝对高度和宽度的框,然后用下面的CSS来控制一段文字行数,超出则显示省略号…

方法1:单行情况下,规定长度,超出部分显示省略号

.Xulgr{
	width: 100px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;/*不换行*/
	text-overflow: ellipsis;/*超出省略号*/
}

方法2:多行情况下,规定只显示多少行,超出显示省略号。

.Xulgr{
	display: -webkit-box;
	overflow: hidden;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;  /*只显示4行*/
}

注意:方法2因-webkit-line-clamp已经规定了行数,如果加上高度height会导致webkit-line-clamp失效。

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容