问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
liaojin1
    170413

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

    react前端csscss3react-hooks
    阅读 9.4k
    1 个回答
    得票最新
    头像
    zzgzzg00
      3.7k21420

      `
      <!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>
      `
      这样试试

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题