文字过长显示...且鼠标移入使用tooltips显示全部内容

1、文字过长显示...且鼠标移入使用tooltips显示全部内容

// tradeshop页面修改信息里错误提示的数据过长，使用省略号后，鼠标 移入以tooltip显示
// multiLine为true表示为多行数据，比较高度，默认是单行比较 （可选）
// title 内容(必传)// 单行的外层长度fixWidth（必传）
   内层长度coreWidth（可选，默认450px）
import React from 'react'import { Tooltip, Alert } from 'antd';import './EllipsisTooltip.less'
class EllipsisTooltip extends React.Component { 
   state = {
        visible: false
    }
    handleVisibleChange = (visible) => {
        const el = this.container;
        const elcopy = this.containercopy;
        if(el.clientWidth < elcopy.clientWidth) (
            // 比较长度 ，超过则说明过长，改变状态显示tooltip
            this.setState({
                visible: visible
            })
        )
    }
    handleVisibleHeightChange = (visible) => {
        const el = this.container;
        const elcopy = this.containercopy;
        if (el.clientHeight < elcopy.clientHeight) {
            // copy的数据不受限，比较省略后数据的高度，超过则说明过长，改变状态显示tooltip
            this.setState({
                visible: visible
            })
        }
    }
    render() {
        // 由于alert标签自身的padding，所以内层的容器，宽度不等于外层，
如果需要控制内层，coreWidth
        const style = {
            display: 'inline-block',
            width: this.props.coreWidth || '450px',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        }
        const styleHieghtcopy = {
            wordWrap: 'break-word',
            wordBreak: 'normal',
            display: 'inline-block',
            visibility: 'hidden',
            position: 'absolute',
            wordBreak: 'break-all',
        }
        return (
            <div>
                {
                    this.props.multiLine ? (
                        <div>
                            {/* copy数据 */}
                            <div ref={node => this.containercopy = node}
                             style={styleHieghtcopy}>
                                {this.props.title}
                        </div>
                            <Tooltip
                                placement="right"
                                visible={this.state.visible}
                                onVisibleChange={this.handleVisibleHeightChange}
                                title={this.props.title}
                                overlayStyle={
                                    {
                                        width: '300px', 
                                       wordWrap: 'break-word',
                                        wordBreak: 'normal'
                                    }
                                }
                            >
                                <div style={{ width: this.props.fixWidth }}>
                                    <div
                                        ref={node => this.container = node}
                                        className='height_title'>{this.props.title}
                                    </div>
                                </div>
                            </Tooltip>
                        </div>
                    ) : (
                            <div>
                                {/* copy数据 */}
                                <div
                                     ref={node => this.containercopy = node}
                                     className="error_message_copy">{this.props.title}
                                </div>
                                <Tooltip
                                    placement="right"
                                    visible={this.state.visible}
                                    onVisibleChange={this.handleVisibleChange}
                                    title={this.props.title}
                                    overlayStyle={
                                        { 
                                           width: '300px',
                                            wordWrap: 'break-word',
                                            wordBreak: 'normal'
                                        }
                                    } 
                               >
                                    <div style={{ width: this.props.fixWidth }}> 
                                       <Alert
                                             style={{ width: this.props.fixWidth }}
                                             message={<span ref={node => this.container = node}
                                             style={style}>{this.props.title}</span>}
                                             type="error" showIcon />
                                    </div>
                                </Tooltip>
                            </div>
                        )
                } 
           </div> 
       )
    }}
export default EllipsisTooltip

样式

.error_message_copy {
    display: inline-block;
    visibility: hidden;
    position: absolute;}
.height_title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-box-align: center;
    word-break: break-all;
}