多行文本溢出显示省略号(…) text-overflow: ellipsis
详解text-overflow
语法:
text-overflow:clip | ellipsis
默认值:clip
适用于:块级容器元素
继承性:无
动画性:否
计算值:指定值
取值:
- clip:当内联内容移除块容器时,将溢出部分裁切掉。
- ellipsis:当内联内容移除块容器时,将溢出部分替换为(...)。注意:要使得text-overflow属性生效,块容器必须显式定义overflow为非visible值,同时显式或者隐式的定义width为非auto值,white-space为nowrap值。
例如:
html代码:
<div class="text-overflow-ellipsis">今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙</div>
css代码:
.text-overflow-ellipsis {margin-top: 20px;width: 300px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
通过上面的css,常见的一行中超出文本宽度的内容用省略号表示就实现了,不知道大家发现没,小颖在设置text-overflow:ellipsis;后还设置了 overflow:hidden; white-space:nowrap;,当设置了text-overflow属性后,要同时设置overflow和white属性,text-overflow才生效。
然而white-space:nowrap; 是指不换行,就是说只能一行显示。
但是有时我们想要实现多行的情况下,在最后一行的最后用“…”来表示。下面小颖就给大家分享下如何使用text-overflow: ellipsis实现多行文本溢出在最后一行显示省略号(…)
先来看看效果图吧:
html代码:
<div class="text-overflow-ellipsis">今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙</div>
css代码:
.text-overflow-ellipsis {margin-top: 20px;height: 55px;width: 100px;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
兼容:
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
如果你把-webkit-line-clamp设置成2,则
如果你需要让文本只显示两行并且在第二行后面加省略号则需-webkit-line-clamp设置成2同时将height设置成35px;则
注意:这里用了一个不是很常见的属性 -webkit-line-clamp
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/
今天小颖上班因为起的晚了,不想洗头发,出门时就套了个假发,哈哈哈哈,有没有想看的呢?················································································
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
下拉
再下拉
没有的啊哈哈哈
小颖就不爆图吓大家啦哈哈,逗逗大家,嘻嘻
转载于:https://www.cnblogs.com/yingzi1028/p/6117002.html
多行文本溢出显示省略号(…) text-overflow: ellipsis相关推荐
- 多行文本溢出显示省略号(…)
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-over ...
- css多行超出显示点_CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
- 纯CSS实现多行文本溢出显示省略号(兼容不同浏览器)
1.单行文本溢出显示省略号 单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可. <style>.s ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- 如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号(…)
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器 实 ...
- 单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号 首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...
- 多行文本溢出显示省略号(…)全攻略
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-over ...
- CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案 文章目录 CSS单行文本以及多行文本显示省略号解决方案 单行文本溢出显示省略号 多行文本溢出显示省略号 第一种效果:仅显示3行文本溢出部分显示省略号 第二 ...
- HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号 核心css语句: 二.多行文本溢出显示省略号 核心css语句: 效果图: 总结 HTML技巧篇:如 ...
最新文章
- dos批处理命令详解
- pageContext对象和config对象
- python pip处理
- windows 和linux 同步api对比
- OpenGL(二)——OpenGL图形绘制
- 基于visual Studio2013解决面试题之0504单链表逆序
- Acrobat Pro DC 教程,如何删除PDF中的隐私信息?
- 使用Sklearn模型做分类并绘制机器学习模型的ROC曲线
- ASCLL码表完整版
- 显卡compute capability7.5 Python3.5.2环境下编译配置caffe
- 使用C语言求一元二次方程的解
- 棋牌麻将 - 基础名词讲解与汇总
- 算法刻意练习-LeetCode实战29-加油站(C++)
- laya-oppo 广告问题ad had showd, please reload
- Android 点九图机制讲解及在聊天气泡中的应用
- “我在用生命送快递”
- 1 0.99999的悖论_公交车总迟到?你大概掉进了“等待时间悖论
- java中的各行换色_java生成excel文件并且隔行换色。
- 中国博客网告别免费午餐 用户数据清除延至7月1日
- Linux中make命令详解
热门文章
- 服务器搭建2 VSFTP搭建FTP服务器
- H3C S1526交换机端口镜像配置
- 我自己关于C语言,编译器,标准库,GUN glibc,CRT ,API之类的理解。
- ural 1353. Milliard Vasya's Function
- ip subnet-zero 和ip classless 的用法
- java解析ajax的数据_java ajax 请求后获取 json 数据 以及 使用 解析 ,解惑
- Redis五大基本数据类型及其相关命令及常用用途
- 3-16Pytorch与随机抽样
- 计算机二级考试网易教程,学姐分享 | 计算机二级来袭,你准备好了吗?
- html5新增graph,Qunee for HTML5