社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
[CSS实现限制显示的字数,超出显示"..."]
一、背景
在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果。
二、实现步骤
CSS代码
.ov{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用。
测试代码
1
2
3
4
5
测试超出显示点点点6
7 .ov{
8 white-space:nowrap;
9 overflow:hidden;
10 text-overflow:ellipsis;
11 width:200px;
12 margin:30px auto;
13 }
14
15
16
17
18 测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
19
20
21
显示效果如下:
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!