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

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

一、很常见的一个需求

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

拆解需求为两部分

  1. 3行 + 多行省略
  2. 如果是多行省略了,展示显示更多按钮

二、直接百度复制粘贴

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

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>
相关推荐
@Dream_Chaser4 分钟前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI6 分钟前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三11 分钟前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三19 分钟前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹20 分钟前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三37 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘1 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13131 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z1 小时前
uniapp使用video实现沉浸式在线课程学习平台
前端