react 单行多行文本溢出显示省略号...

红太狼 2020-11-07 03:55 929阅读 1赞

#### 文本溢出处理 ####

##### 单行文本溢出 #####

单行文本溢出，可直接用css处理，很简单

.ellipsis {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

##### 多行文本溢出 #####

多行文本溢出，在不考虑兼容性的情况下，可直接用css 实现：

.ellipsis {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; // 显示几行
        overflow: hidden;
    }

但是用css 兼容性很不友好，下面是react实现多行溢出显示...,实现原理就是支持css处理的时候，直接用css,不支持的时候，通过js计算来处理显示文字

#### 组件代码 ####

import React from 'react';
    
    export default class Ellipsis extends React.Component {
        static defaultProps = {
            line: 2,
            ellipsis: '...'
        };
    
        constructor(props) {
            super(props);
    
            let that = this;
    
            this.text = '';
            this.setLineClamp = this.setLineClamp.bind(this);
            this.setLineNormal = this.setLineNormal.bind(this);
            this.clipText = this.clipText.bind(this);
            this.init = this.init.bind(this);
        }
    
        componentDidMount() {
            this.init();
        }
    
        componentDidUpdate() {
            this.init();
        }
    
        init() {
            if ('webkitLineClamp' in document.documentElement.style) {
                 this.setLineClamp();
                 this.removeTpl();
            }
            else {
                this.setLineNormal();
                this.clipText();
            }
        }
    
        removeTpl() {
            try {
                this.refs.ellip.removeChild(this.refs.getHeight);
            }
            catch (err) {}
        }
    
        setLineNormal() {
            Object.assign(this.refs.ellip.style, {
                'word-break': 'break-all',
                'white-space': 'normal'
            });
        }
    
        setLineClamp() {
            Object.assign(this.refs.ellip.style, {
                'overflow': 'hidden',
                'display': '-webkit-box',
                'webkitBoxOrient': 'vertical',
                'word-break': 'break-all',
                'white-space': 'normal',
                'webkitLineClamp': this.props.line
            });
        }
    
        clipText() {
            let {line, ellipsis, end = () => {}} = this.props;
            let ellip = this.refs.ellip;
    
            if (!this.h) {
                let getHeight = this.refs.getHeight;
                this.h = getHeight.offsetHeight;
                this.removeTpl();
            }
    
            let getCountHeight = () => {
                return parseFloat(getComputedStyle(ellip)['height'], 10);
            };
    
            let init = true;
    
            if (!this.text) {
                this.text = ellip.textContent;
            }
            else {
                ellip.innerHTML = this.text;
            }
    
            let text = this.text;
            let clip = () => {
                let len = 0;
                while (Math.floor(getCountHeight() / this.h) > line) {
                    len += 1;
    
                    text = text.slice(0, -1);
                    ellip.innerHTML = text;
    
                    if (!init) {
                        ellip.innerHTML += ellipsis;
                    }
                }
    
                return len;
            };
    
            if (0 < clip()) {
                ellip.innerHTML += ellipsis;
                init = false;
                clip();
            }
    
            end();
        }
    
        render() {
            let {children, className = ''} = this.props;
    
            return (
                <div ref="box" className={className}>
                    <div ref="ellip">
                        {children}
                        <span ref="getHeight" style={
        {visibility: 'hidden'}}>好</span>
                    </div>
                </div>
            );
        }
    }

#### 用法 ####

<Ellipsis>要处理的文字</Ellipsis>