react 单行和多行文字溢出显示...

Posted 2022-09-11 slongs

文本溢出处理

单行文本溢出

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