当前位置:首页 > 云计算 > 正文内容

CSS文本显示行数控制

2022-05-31 08:15:28云计算187

对于单行的文字截断,可以使用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行文本就会使用省略号…代替。

本网站文章仅供交流学习 ,不作为商用, 版权归属原作者,部分文章推送时未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知,我们将立即删除.

本文链接:https://www.xibujisuan.cn/22841.html

标签: WordPress