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>
显示效果如下：
CSS实现限制显示的字数，超出显示"..."的更多相关文章
- vue 字符串长度控制显示的字数超出显示省略号
1. html <p class="index__Feature-list-itemlist-title newline"> {{item.name| ellipsis ...
- CSS控制文字显示一行，超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- Css——显示2行数据，超出显示...
解决需求——数据较长时,只显示两行,超出显示... .showTwoRow { text-align: left; text-overflow: ellipsis; display: -webkit- ...
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...
- html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替
前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角 ...
- CSS div内文字显示两行，超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- 文本超出显示省略号CSS
单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...
随机推荐
- 跨Controllers传数据
今天遇到两个问题,第一个是跨controller传值,后一个是比较简单的linq数据库查询问题.先描述以下问题我有一个入库单和一个入库明细,入库的逻辑是先填写入库单在填入库明细.两者要么同时完成,要么 ...
- 【知乎网】Linux IO 多路复用 是什么意思？
提问一: Linux IO多路复用有 epoll, poll, select,知道epoll性能比其他几者要好.也在网上查了一下这几者的区别,表示没有弄明白. IO多路复用是什么意思,在实际的应用中是 ...
- css 设计总结
一.背景图片的拉伸: backgroud-size 说明: http://www.w3school.com.cn/cssref/pr_background-size.asp 效果: http:// ...
- android socket编程用Bufferreader读取的一个失败教训
由于我的手机需要用笔记本开的wifi,躺在床上玩手机时需要关电脑或者是要让电脑放歌的时候总是不想下床,于是我想能不能用一个APP,然后通过局域网实现在手机上对电脑进行操控呢?说干就干. 我在电脑上用的 ...
- 剑指Offer 两个链表的第一个公共结点
题目描述 输入两个链表,找出它们的第一个公共结点. 思路: 题目说的很笼统,应该是有2个链表,找出公共点,第一个公共点后面的链表是共同所有的.可以用map做,直接检测map里有没有出现这个节点. ...
- qt-5.6.0 移植之纯净的linux文件系统的建立
为什么要建立一个最纯净的文件系统,一开始是想在qt-4.8.5的文件系统基础之上加东西,慎重想了一下,这方法行不通,以为有很多东西不熟悉.干脆就自己建立一个. 步骤很简单: 一:下载一个bulidro ...
- BZOJ 4579: [Usaco2016 Open]Closing the Farm
Description 依次删去一个点和它的边,问当前图是否连通. Sol 并查集. 倒着做就可以了. 每次将一个点及其的边加入,如果当前集合个数大于 1,那么就不连通. Code /******** ...
- iis不支持下载apk的解决办法
添加mime类型即可 扩展名:".apk", MIME类型:"application/vnd.android.package-archive"
- 表单验证神器——jquery.validate插件
jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- 浏览器JS脚本
javascript: void((function() { alert("zeze"); })()) javascript: