CSS实现限制显示的字数，超出显示"..."

阿豪聊干货

发布于 2018-08-09 02:46:26

2.4K00

代码可运行

文章被收录于专栏：Java后端技术Java后端技术

运行总次数：0

代码可运行

一、背景

　　在实际项目中，我们常常需要对某些页面的某些特定区域显示指定数量的内容，超出的内容显示"..."来进行美化页面，那么应该怎么做呢？今天就让我们来看看如何达到这一效果。

二、实现步骤

　　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>