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

最新推荐文章于 2025-04-08 10:30:05 发布

weixin_33845881

最新推荐文章于 2025-04-08 10:30:05 发布

阅读量403

点赞数

本文介绍如何使用CSS实现文本溢出时显示省略号的效果，并提供了具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

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

二、实现步骤

　　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>