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