react如何控制文本溢出隐藏，并且点击展开全文

发布于 2022-09-12 01:25:20 字数 367 浏览 24 评论 0

我圈出来的一个div，是通过map循环来实现的hook部分代码如下

css部分如下

目前通过css可以控制超过两行的文本溢出隐藏，并且展示...，但是我需要实现的功能是如果该段文字超出两行，则展示查看更多，如果文字没有超出两行，那么不应该展示查看更多。现在不知道如何使用react来判断文本是否超出两行，求大佬们指点！【给大佬们鞠躬】

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执手闯天涯 2022-09-19 01:25:20

`
<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8'>
<title>Page Title</title>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container, .button, input {
        margin: 0 auto;
        width: 100px;
    }
    .container {
        word-break: break-all;
    }
    .button {
        text-align: right;
    }
    input {
        display: block;
        margin-top: 40px;
    }
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
</style>

</head>
<body>

<script src="../common/babel.min.js"></script>
<script src="../common/react@16.8.9.js"></script>
<script src="../common/react-dom@16.8.9.js"></script>
<script type="text/babel">
    const {useState, useCallback, useEffect, useRef, Fragment} = React;
    const App = props => {
        const [text, setText] = useState('');
        const [hasEllipsis, setHasEllipsis] = useState(false);
        const [needMore, setNeedMore] = useState(false);
        const domRef = useRef(null);
        const heightRef = useRef(0);
        const changeHandle = useCallback(e => {
            setText(e.target.value);
            setHasEllipsis(false);
        }, []);
        useEffect(() => {
            if(hasEllipsis){
                const height = parseInt(getComputedStyle(domRef.current).height);
                setNeedMore(height < heightRef.current);
            }else{
                heightRef.current = parseInt(getComputedStyle(domRef.current).height);
                setHasEllipsis(true);
            }
        }, [hasEllipsis]);
        return(
            <Fragment>
                <input 
                    value={text} 
                    onChange={changeHandle} 
                    placeholder="输入测试数据"
                />
                <div 
                    ref={domRef}
                    className={`container ${hasEllipsis ? 'ellipsis' : ''}`}
                >
                    {text}
                </div>
                {needMore && (<p className="button">展开</p>)}
            </Fragment>
        )
    }

    ReactDOM.render(<App />,document.body);
</script>

</body>
</html>
`
这样试试

回复收藏 0

~没有更多了~