关于css实现单行、多行省略标记
实现单行:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 实现多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; -webkit-line-clamp文本显示行数;
需要结合一下属性进行使用:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
关于css实现单行、多行省略标记的更多相关文章
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
- css多行省略和单行省略
实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 纯 CSS 自定义多行省略:从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
随机推荐
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- Build SSH for Development on Windows Subsystem for Linux
It seems that Windows Subsystem for Linux (WSL) is getting much more mature than the time when it fi ...
- 老男孩Day6作业:计算器
作业需求: 1.实现加减乘除及拓号优先级解析 2.用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) ...
- srs录制视频时间戳有点问题
srs2或者srs3目前最新的版本和之前的版本,使用dvr功能录制flv文件.使用本地播放器,如ffplay.potplayer.vlc.KMP和MPV等,都是正常的播放完整视频.但是使用web fl ...
- luogu2522 [HAOI2011]Problem b
luogu2522[HAOI2011]Problem b 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公 ...
- asyncjs,waterfall的使用
waterfall waterfall(tasks, [callback]) (多个函数依次执行,且前一个的输出为后一个的输入) 按顺序依次执行多个函数.每一个函数产生的值,都将传给下一个函数.如果中 ...
- 快速找出故障机器(single number)
简单起见,假设每个机器存储一个标号为ID的记录(ID是小于十亿的整数),假设每份数据都保存两个备份,这样就有两个机器储存了同样的数据. 1.在某个时间,如果得到一个数据文件ID的列表,是否能够快速地找 ...
- Qt 学习之路 2(3):Hello, world!
豆子 2012年8月22日 Qt 学习之路 2 107条评论 想要学习 Qt 开发,首先要搭建 Qt 开发环境.好在现在搭建 Qt 开发环境还是比较简单的.我们可以到 Qt 官方网站找到最新版 ...
- mybatis插入是返回主键id
<!-- 插入数据:返回记录的id值 --> <insert id="insertOneTest" parameterType="org.chench. ...
- Apache 在 htaccess 禁止访问 和 conf 中的 禁止访问 区别
相信熟悉Web Server的人一定熟悉Apahce.相信熟悉Apahce的人一定知道URL Rewrite.Apache的mod_rewrite模块,可以帮助人们构造出各种各样美化后的URL.在Ap ...