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>

显示效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

如何解决jQuery Validation针对动态添加的表单无法工作的问题?

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂...

2019
来自专栏DeveWork

多说 提速:js内页页脚加载、静态文件CDN

最近为 Jeff的阳台 折腾着插件的提速工作。Jeff的阳台使用了多说评论系统,但多说的加载速度实在是不敢恭维(稳定性也一样),于是又邪恶地想到为多说提速一番,...

19510
来自专栏iOS开发笔记

ios开发之UICollectionView 崩溃的记录

今天写代码,遇见了这样的错误,检查代码都没有错误,运行还是报如下的错误: *** Assertion failure in -[UICollectionVie...

3465
来自专栏Timhbw博客

iOS基础问答面试题连载(二)-附答案

2016-11-2120:41:52 发表评论 7℃热度 1.xcode5和xcode7区别? 2.pch文件原理? 3.UIApplication常见...

3519
来自专栏不止是前端

React下ECharts的数据驱动探索

使用过Vue React框架我们就知道,我们不再更改某个DOM的innertext和innerhtml属性就能完成视图的改变,两者都是通过对状态的改变,唤起 v...

1754
来自专栏Android 开发学习

TabLayout double click 标题回顶部

1702
来自专栏iOS开发笔记

ios开发之UICollectionView 崩溃的记录

今天写代码,遇见了这样的错误,检查代码都没有错误,运行还是报如下的错误: *** Assertion failure in -[UICollectionVie...

2795
来自专栏LinXunFeng的专栏

iOS - Swift UISearchController的取消按钮

1212
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

2261
来自专栏Python、Flask、Django

Go语言学习之 - 简单的并发程序

1041

扫码关注云+社区

领取腾讯云代金券