jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Balloon } from '@alifd/next';
import './css.scss';
export default class Tip extends Component {
static displayName = 'Tip';
static propTypes = {
force: PropTypes.bool, // 是否强制出冒泡提示
}
constructor(props) {
super(props);
this.state = {
need: false,
};
this.title = this.props.title;
// React.Children.count
}
getColContent() {
return <div className={this.state.need ? 'ell-box has-ell' : 'ell-box'} ref={ele => this.myTip = ele}><ins>{this.props.children || this.props.title}</ins><span>{this.props.children || this.props.title}</span></div>;
}
render() {
return (this.props.force || this.state.need) && this.props.title !== null && typeof this.props.title !== 'undefined' ? <Balloon.Tooltip visible={true} trigger={this.getColContent()} align="t" children={this.props.title} /> : this.getColContent(); //
}
componentDidMount() {
if(typeof this.props.onRef==='function'){
this.props.onRef(this);
}
this.computed();
}
componentWillReceiveProps(nextProps) {
if (nextProps.title !== this.title) {
setTimeout(() => this.computed(), 500);
}
}
computed() {
if (this.props.force) {
return false;
}
if (!this.myTip) { return false; }
const w = this.myTip.offsetWidth * 2;
const iw = this.myTip.querySelector('ins').offsetWidth;
this.setState({ need: iw > w });
}
componentWillUnmount() {
this.myTip = null;
}
}
 
css
.ell-box{
// display: inline-block;
// white-space: nowrap;
// width:100%;
// overflow: hidden;
// text-overflow: ellipsis;
// vertical-align: middle;
// -webkit-line-clamp: 2;
width: 100%;
text-overflow: ellipsis;
vertical-align: middle;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
&.has-ell{
 
}
ins{
position:absolute;
visibility:hidden;
white-space: nowrap;
-webkit-line-clamp: 2;
font-style: inherit;
z-index:-5;
left:-99999in;
}
}
.next-overlay-wrapper .next-balloon-tooltip{
// word-wrap:break-word;
}
.next-balloon-tooltip:after{
// background-color: #fff !important;
}

tip组件, 根据列表的宽度显示全部内容或者省略号显示,并且鼠标划过泡泡框提示的更多相关文章

  1. 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

    文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不 ...

  2. android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边

    很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ​ 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...

  3. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  4. angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示

    angular.module('ng').filter('cut', function () { return function (value, wordwise, max, tail) { if ( ...

  5. js 保留字符串中的关键字前后两个字符其他内容用省略号显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. css 文本省略号显示

    文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行.不折行: div { white-space:nowrap;/* 规定文本是否折行 */ overflow: hidden;/* ...

  7. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  8. js实现长按显示全部内容

    js实现文字超出省略号显示时长按显示全部 元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容 #toolkitContainer { ma ...

  9. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  10. ionic入门之色彩、图标、边距和界面组件:列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

随机推荐

  1. H5实现视频监控网络直播时前端自动适配

    H5直播 目前很多视频直播.点播方案都有H5客户端的需求.传统安防行业互联网话也同样需要可以在各类Windows和移动终端.微信等浏览器器实现H5直播.回放. 前端适配 因为Windows和各类移动终 ...

  2. virtio 学习随笔 —— 一、virtio基础

    一.virtio基础 参考文章: Virtio: An I/O virtualization framework for Linux virtio: Towards a De-Facto Standa ...

  3. Windows版Redis3.2X64部署教程

    1.使用的Redis-x64-3.2.100.ZIP解压版 redis免安装版链接:https://pan.baidu.com/s/1MYmNxiY8JIOuXjVr0W_-5A 提取码:1234 2 ...

  4. PCIe 载板设计资料原理图:382-基于FMC+的XCVU3P高性能 PCIe 载板

    基于FMC+的XCVU3P高性能 PCIe 载板 一.板卡概述 板卡主控芯片采用Xilinx UltraScale+16 nm VU3P芯片(XCVU3P-2FFVC1517I).板载 2 组 64b ...

  5. 利用Python进行数据分析 Unit 2

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  6. ManySpeech.AliParaformerAsr 使用指南

    一.简介 ManySpeech 是由 manyeyes 社区开发的一款基于 C# 的语音处理套件. ManySpeech.AliParaformerAsr 是 ManySpeech 中的"语 ...

  7. 2025多校冲刺CSP模拟赛2 总结

    比赛:2025多校冲刺CSP模拟赛2 日期:\(25.10.04\),场地:\(\text{accoder}\),排名:\(45/137\) 估分:\(100+([0,100])+20+45=165+ ...

  8. 锐捷uac

    admin:admin@123 ruijie@2020 admin123 web命令注入 122 root 0 SW< [kdelayd] 123 root 0 SW< [kmpathd] ...

  9. XPOSED优秀模块列表 --- 文本链接

      在任何应用程序中突出显示电话号码.网址.电子邮件地址和地图地址 有关更多信息和屏幕截图,请参阅支持 URL(XDA 线程). 如果你想说谢谢,你可以捐款:https://www.paypal.co ...

  10. 自AI火了之后又一个自学方法

    上图是狐猴浏览器默认提供的chatTPG的ai的使用,我发送不完整代码,也可以准确的猜测出代码的含义. 效果十分强大