多行文本省略号显示，更多按钮展开全部

yede2025-04-29 15:40

最近刚完成一个应用商店的项目Win软件商店，做一下流水账记录

一、很常见的一个需求

软件的详情，有些很长，有些很短。如果是过长的详情则显示3行，末尾用省略号显示，然后加一个显示更多的按钮，让感兴趣的用户自己点击查看。这是一个很合理且常见的需求

拆解需求为两部分

3行 + 多行省略
如果是多行省略了，展示显示更多按钮

二、直接百度复制粘贴

百度搜索多行文本省略号显示，即可解决第一个问题

css 复制代码

.multi {
    display: -webkit-box;          /* 启用弹性伸缩盒 */
    -webkit-box-orient: vertical;   /* 文本垂直排列 */
    -webkit-line-clamp: 3;         /* 显示行数限制 */
    overflow: hidden;               /* 隐藏溢出内容 */
    text-overflow: ellipsis;        /* 添加省略号 */
}

三、判断内容是否过多

如果我们已经知道了3行是一个分水岭，那么3行内容的高度就可以作为一个判断的标准

假设3行内容的高度是X，如果内容的高度大于X，是不是就可以判断需要展示更多按钮了

模板如下

vue 复制代码

<template>
<p class="describe" :class="[showMoreMode ? '' : 'multi']">
  <span ref="describeRef">
    {{ softInfo.describe }}
  </span>
</p>

<p v-if="showMore" class="show-more" @click="handleShowMore">
  {{ showMoreMode ? '收起' : '显示更多' }}
</p>
</template>

<script setup>
const showMore = ref(false)
const describeRef = ref<any>(null)
const checkShowMore = () => {
  // 3行的高度
  const wrapHeight = 70
  describeRef.value.style.display = 'inline-block'
  const contentHeight = describeRef.value?.clientHeight
  describeRef.value.style.display = 'inline'

  showMore.value = contentHeight > wrapHeight
}
const showMoreMode = ref(false)
const handleShowMore = () => {
  showMoreMode.value = !showMoreMode.value
}
</script>