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 ...
随机推荐
- Directx11教程(14) D3D11管线(3)
原文:Directx11教程(14) D3D11管线(3) 现在我们开始学习一些CP(command processor)的知识.参考资料: http://fgiesen.wordpres ...
- 一条SQL完成跨数据库实例Join查询
背景 随着业务复杂程度的提高.数据规模的增长,越来越多的公司选择对其在线业务数据库进行垂直或水平拆分,甚至选择不同的数据库类型以满足其业务需求.原本在同一数据库实例里就能实现的SQL查询,现在需要跨多 ...
- js、php判断手机PC
用于phpcms <script type="text/javascript"> var url = window.location.href; if(/Android ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- Spring中配置DataSource数据源的几种选择
从JNDI获得DataSource. 从第三方的连接池获得DataSource. 使用DriverManagerDataSource获得DataSource. 一.从JNDI获得DataSource ...
- LOJ 10239 有趣的数列
LOJ 10239 有趣的数列 首先可以将奇数视作入栈,偶数视作出栈,那么它是卡特兰数,其实打表也能看出来,而且好像可以用dp? 不过这道题的难点不在这里,p不是素数,所以不能用求逆元来做,不过前50 ...
- mysql 优化 1
一. 数据库索引 规则8:业务需要的相关索引是根据实际的设计所构造sql语句的where条件确定的,业务不需要的不要建索引,不允许在联合索引(或主键)中存在多余的字段,特别是该字段根本不会在条件语句中 ...
- 《attention is all you need》解读
Motivation: 靠attention机制,不使用rnn和cnn,并行度高 通过attention,抓长距离依赖关系比rnn强 创新点: 通过self-attention,自己和自己做atten ...
- BZOJ 1935 Tree 园丁的烦恼 CDQ分治/主席树
CDQ分治版本 我们把询问拆成四个前缀和,也就是二维前缀和的表达式, 我们把所有操作放入一个序列中 操作1代表在x,y出现一个树 操作2代表加上在x,y内部树的个数 操作3代表减去在x,y内部树的个数 ...
- oracle函数 power(x,y)
[功能]返回x的y次幂 [参数]x,y 数字型表达式 [返回]数字 [示例] select power(2.5,2),power(1.5,0),power(20,-1) from dual; 返回:6 ...