CSS多余文本省略号显示
CSS多余文本省略号显示
本次案例代码是在 elementui 当中的 table 组件中实际需求
当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用
对于过长文本进行单行省略显示,当鼠标移动到对应文本行时,展示全部,当鼠标离开后又恢复单行,多余内容收缩出现省略号;
对应文本应当转换为块元素或者使用 inline-block ;
/deep/.el-table__row {
.cell {
//对超出内容隐藏
overflow: hidden;
// 显示省略符号来代表被修剪的文本
text-overflow: ellipsis;
// 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
white-space: nowrap;
}
.cell:hover{
overflow: auto;
text-overflow:clip;
white-space:normal;
}
}
以上为一 CSS3 常用案例
CSS多余文本省略号显示的更多相关文章
- 微信小程序 wxml 文件中如何让多余文本省略号显示?
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs 取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- css 文本省略号显示
文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行.不折行: div { white-space:nowrap;/* 规定文本是否折行 */ overflow: hidden;/* ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css多余文本使用....代替
1. 只显示单行文本,多余文本使用...代替 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2. 显示多行文本,多余文 ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- css文本截字,超出文本省略号显示
一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...
- css中多余文字省略号显示
项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上.虽然用的多,但是我也不知道为啥,我始终记不住.所以,通过这种方式,让自己加深一下印象 情况一:单行文字超出规定宽度后,以省略号形式展示 ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
随机推荐
- php Laravel Thrift使用TMultiplexedProcessor复用端口模式
thrift的使用中一般是一个Server对应一个Processor和一个Transport,如果有多个服务的话,那必须要启动多个Server,占用多个端口,这种方式显然不是我们想要的,所以thrif ...
- 【JZOJ4934】【NOIP2017GDKOI模拟1.12】a
helpless fucking 结论:如果一个数可以被对于a序列中每个数的最大公约数整除,那么它就是好的. Bitch Man 感性证明: 贪心地想,对于a序列中的任意两个数,它们的最大公约数可由这 ...
- Directx11教程(17) D3D11管线(6)
原文:Directx11教程(17) D3D11管线(6) VS shader输出clip空间的顶点位置及参数信息(比如颜色)到一个FIFO中,之后PA(primitive assembl ...
- 阿里云对象存储OSS支持版本管理特性
阿里云对象存储OSS现已经全面支持“对象版本管理”特性.该功能适用于所有的存储类型以及区域.当Bucket启用该特性后,“对象版本管理”功能可以保护和恢复误删除.误覆盖的数据. 对象存储OSS“版本管 ...
- Docker Remote API使用准备
1 修改配置文件 CentOS: /etc/sysconfig/docker Ubuntu: /etc/init/docker.conf 1.添加: DOCKER_OPTS='-H tcp://0.0 ...
- 【C++】去除vector里重复元素的方法比较
背景:构造一个无重复的白名单,之后要在里面进行二分查找.故要求名单有序,且无重复,并且要进行二分查找,所以要采用有:随机访问迭代器类型的容器.这类容器有vector,array,deque.显然要ve ...
- SpringCloud Zuul 路由映射规则配置
阅读目录 前言 快速入门 路由详解 Cookie与头信息 本地跳转 Hystrix和Ribbon支持 过滤器解释 动态加载 后记 回到目录 前言 本文起笔于2018-06-26周二,接了一个这周要完成 ...
- Flutter SDK path为空导致工程打开后不显示iOS模拟器的问题
说明下问题场景,面向git编程时下载了个开源的Flutter项目 Mac系统下AndroidStudio打开工程后,发现顶部不展示iPhone模拟器 根据ide浅黄色提示提示,判断是FlutterSD ...
- 自定义View系列教程07--详解ViewGroup分发Touch事件
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- hihocoder1994 树与落叶 DFS+前缀和+二分
DFS找到节点删除的时间,删除的时间其实就是子树的最长链,然后给每个点打一个时间戳,然后求每个时间点对应删除的节点的个数,对于1-max_time时间戳求一个前缀和,然后二分找到和m距离最近的那一天 ...