Vue3/RN 实现文字超过5行，显示展开收起

 效果图

 https://raw.githubusercontent.com/expo/react-native-read-more-text/master/example.gif

          {{ getHomeworkData.requireContent }}
        

          

            

              
{{ $t('app_show') }}
                
              
              

                {{ getHomeworkData.requireContent }}
            
          
          

            

              

                {{ getHomeworkData.requireContent }}
                
{{ $t('app_hide') }}
                  
                
              
            
          
        


const isExpanded = ref(false)
const needShowExpande = ref(false)
const textContainer = ref()

## 接口中
nextTick(() => {
      if (textContainer.value.offsetHeight > 103) {
        needShowExpande.value = true
      } else {
        needShowExpande.value = false
      }
    })


## 展开 收起
const expandContent = () => {
  isExpanded.value = true
}

const collapseContent = () => {
  isExpanded.value = false
}

.multi-text- {
  &flex {
    display: flex;

    .iconfont {
      font-size: 8px;
      margin-top: 8px;
    }
  }

  &wrap {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;

    &:before {
      content: '';
      float: right;
      height: 100%;
      margin-bottom: -20px;
    }
  }

  &all {
    display: -webkit-box;

    &:after {
      content: '';
      float: left;
      height: 100%;
      margin-bottom: -20px;
    }
  }

  &collapse {
    float: right;
    clear: both;
    margin-right: 10px;
  }

  &btn {
    float: right;
    clear: both;
    margin-right: 10px;
    margin-top: 4px;
  }
}

 RN

使用第三方库实现

GitHub - expo/react-native-read-more-text