CSS文本显示行数控制

对于单行的文字截断，可以使用text-overflow: ellipsis属性来实现：

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

此时，溢出的文字会被省略号…代替。

多行文本的情况，例如博客文章摘要，在PC端和手机端需要显示不同数量的文字，那么则可以使用以下代码来控制显示行数：

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

此时，超过3行文本就会使用省略号…代替。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。