首页 技术文章 web前端 CSS文本超出省略号 多行文本溢出显示省略号
正文 评论

CSS文本超出省略号 多行文本溢出显示省略号

我们在进行WordPress主题开发时候,前端写网站页面经常会遇到文章标题名称过长,超出div的情况。
那么CSS多行文本溢出显示省略号改该怎么写呢?
下面主题君给出了CSS溢出文字隐藏显示省略号和CSS多行文本溢出显示省略号的方法。

单行溢出显示省略号:

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

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

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

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

上面的2,指的是CSS两行超出省略号,也可以是3行,甚至多行,大家可以亲自试试看。

-=||=-收藏赞 (1)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,021
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:19,982
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:19,582
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,109
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:17,996
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:14,845
详情
回复
1 条评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。

主题君

3行隐藏
.ztjun {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

我很懒。