likes
comments
collection
share

如何动态展示文本简介下的展开按钮?

作者站长头像
站长
· 阅读数 20

Keywords:富文本的滚动高度获取scrollHeight跟offsetHeight高度

产品需求1.文本简介时前三行展示,后面省略号2.超出前三行时,展示‘展开按钮’,否则不展示,展开按钮

分析1.文本简介是个富文本,react解析富文本,用到的api是

 const data=`<p><span>1</span></p>`
 <div dangerouslySetInnerHTML={{ __html:    data }}></div>

2.超出三行展示省略号,则采用css方式即可

    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 这里是超出几行省略 */
    overflow: hidden;

3.是否展示‘展开按钮’,这个需要根据内容的来动态展示,当简介没超过三行文本的时候,也就是末尾没有'...'的时候就不需要展示‘展开按钮’,如何判断呢?用到另外两个dom相关的api srollHeight和offsetHeight

useEffect(() => {
    let conDOm = conRef.current;
    if (conDOm) {
      const offsetH = conDOm.offsetHeight;
      const srollH = conDOm.scrollHeight;
      console.log(offsetH, 'offsetH');
      console.log(srollH, 'srollH');
      // 会有2px的偏差
      if ((srollH - 2) > offsetH) {
        setisDisplayText(true);
      }
    }
}, [])

进阶面试的时候会问你,react这个api: dangerouslySetInnerHTML是如何实现的?

转载自:https://segmentfault.com/a/1190000041592207
评论
请登录