CSS技巧:文本显示行数控制

追格官方小助手/ 2022年04月08日/ CSS教程/ 浏览 2686

追格小编之前写过一篇《wordpress函数:the_excerpt()函数自动调用文章摘要的字数长度》,今天分享一篇文章摘要若想在PC端和手机端显示不同数量的文字,我们可以使用以下代码来控制显示行数。


.entry p.excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


-webkit-line-clamp: 2; 超过2行文本即用省略号...代替。


当然,对于单行的文字截断,即超出隐藏,我们可以使用text-overflow: ellipsis属性来实现:


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


推荐阅读:
WordPress函数:修改the_excerpt()函数摘要末尾默认省略号[…]为更多

发表评论

暂无评论,抢个沙发...

客服 工单