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

Keywords:
富文本的滚动高度获取scrollHeight跟offsetHeight高度
产品需求
1.文本简介时前三行展示，后面省略号
2.超出前三行时，展示‘展开按钮’，否则不展示，展开按钮
【如何动态展示文本简介下的展开按钮（）】分析
1.文本简介是个富文本，react解析富文本，用到的api是

const data=https://www.it610.com/article/`1 `

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是如何实现的？