判断文本是否溢出/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;
}
参考链接: https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag
判断文本是否溢出/hover显示全部的更多相关文章
- js判断文本是否溢出容器
onShowNameTipsMouseenter: function(e) { var target = e.target; var containerLength = $(target).width ...
- 【UWP】仅在TextBlock文本溢出时显示Tooltip
前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...
- CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...
- 写一个方法完成如下功能,判断从文本框textbox1输入的一个字符,如果是数字则求该数字的阶乘,如果是小写字条,则转换为大写,大写字符不变,结果在文本框textbox2中显示
窗体设计: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- text-overflow文本溢出隐藏“...”显示
一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...
- css实现文本溢出用...显示
文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...
- 多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...
随机推荐
- python爬虫学习之正则表达式的基本使用
一.正则表达式 1. 正则表达式是字符串处理的有力工具和技术. 2. 正则表达式使用某种预定义的模式去匹配一类具有共同特征的字符串,主要用于处理字符串,可以快速.准确地完成复杂的查找.替换等处理要求, ...
- 前端“黑话”polyfill
前言 在Web前端开发这个日新月异的时代,总是需要阅读一些最新的英文技术博客来跟上技术的发展的潮流.而有时候会遇到一些比较高频的“黑话”,在社区里面可能已经是人人皆知的“共同语言”,而你接触的少就偏偏 ...
- Android 视频播放器 (二):使用MediaPlayer播放视频
在 Android 视频播放器 (一):使用VideoView播放视频 我们讲了一下如何使用VideoView播放视频,了解了基本的播放器的一些知识和内容.也知道VideoView内部封装的就是Med ...
- 从零开始单排学设计模式「UML类图」定级赛
阅读本文大概需要 3.5 分钟. 本篇是设计模式系列的开篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统. 所以现在打算重写,加上距离现在也有一段时间了, ...
- Git使用详细教程(1):工作区、暂存区、本地仓库、远程仓库
之前的写过一篇如何在服务器上搭建Git服务Git服务器搭建,接下来的一段时间,我将详细的讲解Git的使用.看如下一张图片,本篇主要理解一些基本概念. 图中几个名词的意思如下: workspace: 工 ...
- Maven相关命令
mvn comile 编译(main - >java) mvn test 测试 mvn package 打成 jar / war 包 mvn install 将模块放入本地仓库 mvn cl ...
- Mysql实现null值排在最前或最后
最近在做项目迁移,Oracle版本的迁到Mysql版本,遇到有些oracle的函数,mysql并没有,所以就只好想自定义函数或者找到替换函数的方法进行改造. oracle做数据排序的时候,有时候可以用 ...
- [原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本
[原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本 工具: k8uac编译: VC++ 作者:K8哥哥发布: 2018/11/25 1:30 ...
- DotNetCore深入了解之二HttpContext类
当KestrelServer启动时,会绑定相应的IP地址,同时在绑定时将加入HttpConnectionMiddleware作为终端连接的中间件. public async Task StartAsy ...
- Android内存优化之磁盘缓存
前言: 在上一篇文章中介绍了内存缓存,内存缓存的优点就是很快,但是它又有缺点: 空间小,内存缓存不可能很大: 内存紧张时可能被清除: 在应用退出时就会消失,做不到离线: 基于以上的缺点有时候又需要另外 ...