CSS实现限制显示的字数，超出显示"..."
一、背景
在实际项目中，我们常常需要对某些页面的某些特定区域显示指定数量的内容，超出的内容显示"..."来进行美化页面，那么应该怎么做呢？今天就让我们来看看如何达到这一效果。
二、实现步骤
CSS代码
.ov{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}这样我们就实现了这一效果，但是限制条件是：所要显示的内容只能在一行，不能有换行出现，否则不起作用。
测试代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>测试超出显示点点点</title>
6 <style type="text/css">
7 .ov{
8 white-space:nowrap;
9 overflow:hidden;
10 text-overflow:ellipsis;
11 width:200px;
12 margin:30px auto;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="ov">
18 测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
19 </div>
20 </body>
21 </html>显示效果如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-05-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
