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

最近刚完成一个应用商店的项目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>
相关推荐
烛阴27 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子30 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三3 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python