文本溢出处理

单行文本溢出

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