Vue3/RN 实现文字超过5行，显示展开收起_vue 文本超过限制展开-CSDN博客

本文链接：https://blog.csdn.net/weixin_39428080/article/details/133799095

文章描述了一种在ReactNative应用中使用第三方库`react-native-read-more-text`实现的可展开/收起的多行文本内容展示，通过检测内容高度自动控制显示状态。

摘要由CSDN通过智能技术生成

效果图

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

<div class="multi-text-content" ref="textContainer" v-if="!needShowExpande">
          {{ getHomeworkData.requireContent }}</div>
        <div class="training_project_date" v-else>
          <div class="multi-text-flex" v-if="!isExpanded">
            <div class="multi-text-wrap">
              <div class="multi-text-btn" @click="expandContent">{{ $t('app_show') }}
                <i class="iconfont icon" :class="'icon-xialaxiaojiantou'"></i>
              </div>
              <div class="multi-text-content training_project_date">
                {{ getHomeworkData.requireContent }}</div>
            </div>
          </div>
          <div class="multi-text-flex" v-else>
            <div class="multi-text-all">
              <div class="multi-text-content">
                {{ getHomeworkData.requireContent }}
                <div class="multi-text-collapse" @click="collapseContent">{{ $t('app_hide') }}
                  <i class="iconfont icon" :class="'icon-shouqijiantou'"></i>
                </div>
              </div>
            </div>
          </div>
        </div>


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;
  }
}