taro超过3行隐藏显示展开功能

结构：

   <View id='desName' className={`${styles.p} ${!isCut ? 'text-cut-4' : ''}`}>    
     {info?.briefIntroduction}
   </View>
   <View id='name' className={`${styles.p} ${styles.briefIntroductionNoShow}`}>
     {info?.briefIntroduction}
   </View>
        {isShowMore && (
          <View className={styles.open} onClick={handleOpenIsCut}>
            {isCut ? '收起详情' : '展开详情'}{' '}
            <Image src={icon_push} className={`${styles.icon_push} ${isCut ? styles.rotate : ''}`}></Image>
          </View>
        )}

样式：

.p {
  font-size: 14px;
  color: #333333;
  line-height: 24px;
  margin-top: 12px;
}
.briefIntroductionNoShow{
  position: absolute;
  left: 999px;
  width: 100%;
}
.text-cut-2,.text-cut-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
 
.text-cut-2 {
    -webkit-line-clamp: 2;
}
 
.text-cut-4 {
  -webkit-line-clamp: 4;
}

逻辑：

  const [isShowMore, setIsShowMore] = useState<boolean>(false);
  const [info, setInfo] = useState<Partial<infoProp>>({});
 const [isCut, setIsCut] = useState<boolean>(false);
  const handleOpenIsCut = () => {
    setIsCut(!isCut);
  };
 useEffect(() => {
    if (info?.briefIntroduction) {
      Taro.nextTick(async () => {
          const query = await selectorQueryClientRect('#name');
        const queryOld = await selectorQueryClientRect('#desName');
        // 4行行高96
        if (query.height > queryOld) {
          setIsShowMore(true);
        }
      });
    }
  }, [info]);
  const selectorQueryClientRect = (selector: string): Promise<NodesRef.BoundingClientRectCallbackResult> =>
    new Promise(resolve => {
      const query = Taro.createSelectorQuery();
      query
        .select(selector)
        .boundingClientRect((res: NodesRef.BoundingClientRectCallbackResult) => {
          resolve(res);
        })
        .exec();
    });