react文本溢出hover气泡显示全部文本——JS判断文本溢出
需求:
在文本溢出的时候,显示气泡
JS相关知识
// target js元素
const containerLength = target.width; //当前容器的宽度
const textLength = target.scrollWidth; // 当前文字(包括省略部分)的宽度
文本溢出的css, 如超过100px显示...
.ellipis {
display: inline-block;
vertical-align: middle;
width: auto;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
react组件计算,是否溢出
import React, { Component } from "react";
import { Popover } from "antd"
export default class PopoverEllipsis extends Component{
constructor(props) {
super(props);
this.state = {
showPopover: false
};
}
componentDidMount() {
this.validShowPopover();
}
validShowPopover = () => {
const { scrollWidth, clientWidth } = this.children;
this.setState({
showPopover: scrollWidth > clientWidth
})
}
refChildren = (ref) => {
this.children = ref;
}
renderChildren() {
return (
React.cloneElement(
this.props.children, {
ref: this.refChildren
}
)
)
}
render() {
let {
children,
...other
} = this.props;
const {
showPopover
} = this.state;
if (showPopover) {
return (
<Popover
title={null}
content={null}
placement="top"
{...other}
>
{ this.renderChildren() }
</Popover>
)
}
return this.renderChildren()
}
}
react文本溢出hover气泡显示全部文本——JS判断文本溢出的更多相关文章
- jquery 文本框失去焦点显示提示信息&&单击置空文本框
1.<textarea rows="4" placeholder="请输入提醒内容"></textarea> 2. /** * @par ...
- js判断文本是否溢出容器
onShowNameTipsMouseenter: function(e) { var target = e.target; var containerLength = $(target).width ...
- 用js判断文本框中的是不是空,是否有空格
<script type="text/javascript"> function checkRoleName(){ var userName=document.getE ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS实现文本超过指定长度显示省略号
<style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...
- 机房收费系统总结之4——VB.NET 轻松解决判断文本框、组合框为空问题
纵观机房收费系统,判断文本框.组合框为空问题无非两种情况.第一种:判断窗体中所有文本框.组合框是否为空.第二种:判断一部分文本框.组合框是否为空.下面看看是如何实现这两种情况的. 第一种:判断窗体中所 ...
- 判断文本是否溢出/hover显示全部
前言 在工作中我们经常会遇到,文字过多,需要用省略号,并且鼠标hover的时候 还需要 显示全部的文字的需求. 正文 文字过多需要用省略号的实现:上代码啦 .ellipsis { width: 100 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- text-overflow修剪文本,以省略号显示
overflow: hidden; 必须设置,不然无法修剪文本 white-space: nowrap; 规定段落中的文本不进行换行 text-overflow: ellipsis; 当文本溢出 ...
随机推荐
- Linux 常用命令 | top 详解
top 命令实时显示进程的状态.(自己也会占用资源,类似window的任务管理器),由以下几部分组成 默认状态显示的是cpu密集型的进程,并且每5秒钟更新一次. (1) 系统状态 当前时间.系统已运行 ...
- day4-字符串专区
1.字符串 str (用''or“”表示) 字符串中每个组成部分为字符,python中只要是用引号引起来的都叫字符串 ---特征: 加法 n1 = "alex" n2 = &quo ...
- SpringBoot 源码解析 (三)----- Spring Boot 精髓:启动时初始化数据
在我们用 springboot 搭建项目的时候,有时候会碰到在项目启动时初始化一些操作的需求 ,针对这种需求 spring boot为我们提供了以下几种方案供我们选择: ApplicationRunn ...
- mysql去重查询表中数据
1.distinct select count(distinct CName) from teble select count(CName) from (select distinct CName f ...
- netty源码解析(4.0)-29 Future模式的实现
Future模式是一个重要的异步并发模式,在JDK有实现.但JDK实现的Future模式功能比较简单,使用起来比较复杂.Netty在JDK Future基础上,加强了Future的能力,具体体现在: ...
- 搭建Nginx正向代理服务
需求背景: 前段时间公司因为业务需求需要部署一个正向代理,需要内网服务通过正向代理访问到外网移动端厂商域名通道等效果,之前一直用nginx做四层或者七层的反向代理,正向代理还是第一次配置,配置的过程也 ...
- PL真有意思(二):程序设计语言语法
前言 虽然标题是程序语言的语法,但是讲的是对词法和语法的解析,其实关于这个前面那个写编译器系列的描述会更清楚,有关语言语法的部分应该是穿插在整个设计当中的,也看语言设计者的心情了 和英语汉语这些自然语 ...
- Previous operation has not finished; run 'cleanup' if it was interrupted最简单有效的解决方法
今天提交代码报错,看了看提示的错误,百度了一下,发现操作都比较繁琐,所以自己重新给一个最简单有效的. 有的要下载sqlite3.exe,借助它清空本地.svn\wc.db数据库文件里面的operati ...
- 在linux系统下进行pip升级注意事项
今天鼓捣爬虫的时候需要用pip安装beautifulsoup4,但是出现了错误,说我的pip版本太低,需要升级一下.刚开始我用了下面这段代码: pip install --upgrade pip 显示 ...
- 胜利点组——“萌猿填词”微信小程序评价
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 1.根据(不限于)NABCD评论作品的选题; (1).你的创意解决了 ...