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

文本溢出处理

单行文本溢出

单行文本溢出，可直接用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>