三行省略+view all 方法1：

问题： chrome有效，ios客户端无效

<script setup lang="ts" name="Describe">
import { onMounted, reactive, ref, toRefs } from 'vue';
​
const textRef = ref(null);
​
const state = reactive({
  // 是否显示所有文本
  showAll: true,
});
​
// 点击展示所有文本
const clickToShowAll = () => {
  state.showAll = true;
};
​
onMounted(() => {
  if (textRef.value) {
    const { clientHeight } = textRef.value;
    window.console.log('----------------clientHeight', clientHeight);
    // 20 * 3  三行省略
    // 判断是否显示省略号及扩展箭头
    if (clientHeight > 60) {
      state.showAll = false;
    }
  }
});
​
const { showAll } = toRefs(state);
</script>
​
<template>
  <section class="description">
    <div
      class="text-content"
      :class="showAll ? '' : 'overflow-ellipsis-3'"
      ref="textRef"
    >
      <!-- 下拉箭头按钮 -->
      <section v-if="!showAll" class="right-down-btn" @click="clickToShowAll">
        <div class="down-arrow"></div>
      </section>
      {{ '研然花制认如太包快算派往区声选深需类教计铁验志题王青进运问青置角格和称值内始非但及非属了高派位导而合便红克离加连时白加边转非且别角段。样其院平青林科根王度什如清青证较自光复王。' }}
    </div>
  </section>
</template>
​
<style lang="less" scoped>
.description {
  display: flex;
  .text-content {
    font-size: 14px;
    line-height: 20px;
    // 超出3行省略号
    &.overflow-ellipsis-3 {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      &::before {
        content: '';
        height: calc(100% - 15px);
        float: right;
      }
      .right-down-btn {
        margin-left: 8px;
        float: right;
        clear: both;
        width: 10px;
        height: 10px;
        .down-arrow {
          transform: rotate(-90deg);
          width: 5.25px;
          height: 9px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          background-image: url('@/assets/img/icon_left_arrow.png');
        }
      }
    }
  }
}
</style>

三行省略+view all 方法2：vue-clamp：

github.com/Justineo/vu…

vue-clamp.vercel.app/?lang=zh

问题： vue2可以使用，vue3该插件不支持

vue3使用方法

github.com/Justineo/vu…

gist.github.com/voratham/4f…

三行省略+view all 方法3：最终vue3方法：

注意：

1. 引入 VueClamp组件，直接使用github.com/Justineo/vu…
2. 需要 npm i resize-detector
3. 注意 slot中只能使用非block的元素，直接使用div无法实现尾部环绕

<script setup lang="ts" name="Describe">
import VueClamp from '@/components/VueClamp/index.vue';
​
// expand图片
const leftArrow = '...';
</script>
​
<template>
  <section class="description">
    <VueClamp class="text-content" :max-lines="3"
      >{{ '研然花制认如太包快算派往区声选深需类教计铁验志题王青进运问青置角格和称值内始非但及非属了高派位导而合便红克离加连时白加边转非且别角段。样其院平青林科根王度什如清青证较自光复王。' }}
      <template v-slot:after="{ toggle, expanded }">
        <!-- 下拉箭头按钮，此处必须是非block元素 -->
        <div class="inline">
          <img
          class="down-arrow"
          :class="expanded ? 'top-arrow' : ''"
          :src="leftArrow"
          @click="toggle"
          />
        </div>
      </template>
    </VueClamp>
  </section>
</template>
​
​
<style lang="less" scoped>
  .description {
    .text-content {
      font-size: 14px;
      line-height: 20px;
    }
    .inline {
      margin-left: 8px;
      display: inline-block;
      width: 10px;
      height: 10px;
      .down-arrow {
        transform: rotate(-90deg);
        width: 5.25px;
        height: 9px;
        &.top-arrow {
          transform: rotate(90deg);
        }
      }
    }
  }
</style>