CSS实现限制显示的字数,超出显示"..."
2016-05-14 13:47
627 查看
一、背景
在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果。
二、实现步骤
CSS代码
这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用。
测试代码
显示效果如下:
在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果。
二、实现步骤
CSS代码
.ov{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用。
测试代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>测试超出显示点点点</title> <style type="text/css"> .ov{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:200px; margin:30px auto; } </style> </head> <body> <div class="ov"> 测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点 </div> </body> </html>
显示效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/01/9957de847398ab58bafb471535a5e903.png)
相关文章推荐
- 带你熟悉CSS浮动
- CSS动画 防止动画结束后,回归原位
- Zen Coding的一种快速编写HTML/CSS代码的方法
- CSS中的#和.
- CSS 实现:checkbox
- CSS3的REM设置字体大小
- css 不定宽度的块级元素水平居中
- 3.css控制div的显示
- 针对用css做滑动门时遇到width问题的一点新的
- Css常用操作——————图片
- Css常用操作——————导航栏
- CSS3知识点总结
- Css常用操作——————分类
- HTML CSS 水平导航
- HTML CSS 水平导航
- HTML CSS 水平导航
- HTML CSS 水平导航
- HTML CSS 水平导航
- HTML CSS 水平导航
- HTML CSS 水平导航