html css文字过多用省略号代替,当鼠标hover时显示全部的文字
时间:2018-11-09
本文章向大家介绍判断文本是否溢出/hover显示全部,即:文字过多,需要用省略号,并且鼠标hover的时候 还需要 显示全部的文字,需要的朋友可以参考一下
前言
在工作中我们经常会遇到,文字过多,需要用省略号,并且鼠标hover的时候 还需要 显示全部的文字的需求。
正文
- 文字过多需要用省略号的实现:上代码啦
.ellipsis { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block //块级标签不需要 }
-
如何得知这个是否溢出呢?关键词:clientWidth 和scrollWidth: 代码奉上:
// 我是在react中实现 componentDidMount () { // 在did mount 中判断是否溢出 const node = this.ref.current // 判断的dom节点,使用ref const clientWidth = node.clientWidth const scrollWidth = node.scrollWidth if (clientWidth < scrollWidth) { this.setState({ // 把是否溢出的状态存在state中,之后从state中拿值使用 overflow: true }) } } // 在普通js中实现,方法一样,取到dom,判断clientWidth 和scrollWidth
- 判断完溢出,一般会需要处理,我这里的需求是hover时候再显示全部。方法两种,第一,使用伪类,第二,包裹一个标签,该标签hover时候显示。
重点坑: 有省略号的标签,我们使用了overflow:hidden来实现了,那么这个就是一个BFC,hover时候显示的提示框,超出bfc的就显示不了了。。。
方法一 : 伪类实现:代码上html
<span className={`${styles.detail} ${styles.ellipsis}`} ref={this.departmentRef} data-customer={overflow ? department : null}>{department}</span> // 关注data-customer 属性,这个属性在有溢出时候赋值,无溢出时候为null。 还记得ref的作用不?就是第二步中确定是否溢出用的。
.ellipsis { // 第一步溢出的代码 display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 255px; } .ellipsis[data-customer]:hover::after { // 关键代码,伪类实现 content: attr(data-customer); position: absolute; background: #F2F2F2; border: 1px solid #E5E5E5; box-shadow: 0 2px 4px 0 rgba(56,62,71,0.10); border-radius: 2px; padding: 2px 6px; font-size: 13px; color: #202332; top:106px; // 设置位置 left: 10px; // 设置位置 max-width: 90%; word-break: break-word; // 如果一个单词太长,则截断 CSS 属性word-break
指定了怎样在单词内断行。 white-space: normal;// 可以换行white-space
CSS 属性是用来设置如何处理元素中的空白。 }
方法二:在hover标签A 内部再包裹一个标签B,B标签在hoverA时显示。代码走你
<span ref={this.ref} style={{display: 'inline-block'}} className={overflow ? 'overFlowText' : ''}> {tableTitle} {overflow ? (<span className='overflowSpan'>{tableTitle}</span>) : null} </span> // 关键代码是那个三元~
.overflow{ position: relative } .overflow .overflowSpan { display: none } .overflow:hover .overflowSpan{ display: block; position: absolute; top: 10px; left: 0px; }
- 一个Oracle监听问题的网络排查
- MySQL InnoDB Cluster环境搭建和简单测试
- 多平台下的数据存储新秀-PROTOBUF
- TCP的长连接与短连接的含义与区别(附Java代码实现)
- Mycat读写分离配置实践
- 快速搭建主从的脚本和问题排查
- MySQL在RR隔离级别下的unique失效和死锁模拟
- Golang语言--glog日志库使用
- 一个MySQL死锁问题的复现
- Spring Boot 2.0 新特性(一):配置绑定 2.0 全解析
- MySQL断电恢复的一点简单分析
- Spring Boot 2.0 新特性(二):新增事件ApplicationStartedEvent
- 奇怪的go语言iota
- Golang web服务器处理前端HTTP请求跨域的方法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Data Guard及ADG日常运维操作
- 设计模式 之 工厂模式
- C# GTS四轴运动控制器实例(固高科技步进电机不带编码器) -V1
- C# 修改配置文件进行窗体logo切换
- 物理备库的Switchover
- 使用Python自动备份思科交换机配置
- c# winform 窗体最大化后挡住了任务栏
- Oracle参数解析(timed_statistics)
- C#将引用的dll嵌入到exe文件中
- C# 软件版本号
- C# 实现登录并跳转界面
- QT 常用控件操作实例集锦
- C# Socket TCP发送图片与接收图片
- ingress通过daemonSet,nodeSelector,hostNetwork方式部署
- Oracle参数解析(event)