vue 超出多行，省略，展示显示更多按钮

前期准备：根据字体大小和行数确定这个块整体的高度

template

<div class="desc" ref="desc">{{desc}}</div>
<button v-show="showButton">显示更多</button>

script

 //获取高度是否超过4行判断是否展示查看更多按钮getShowMore(){const height = this.$refs.desc? this.$refs.desc.clientHeight : 0; //根据元素的clientheight来判断if(height > 80){this.showButton = true}else {this.showButton = false}}

style

.desc{
font-size:14px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-climp:4;
overflow:hidden;
}

vue 超出多行，省略，展示显示更多按钮相关推荐

js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代
js处理文本内容显示6行,超出6行出现显示更多按钮,对于网上说的css样式处理,基本上都是超出6行使用-去处理,不符合需求,先看结果,再看需求:如下先看实现结果,如下图所示: 需求:产品经理提出详情 ...
多行省略问题详解：省略号和文字重叠，vue之中多行省略失效。
最近敲代码的时候,遇到一个很奇葩的问题, 原因:客户需求,想要文字两端对齐,多行省略.如图: 一,vue之中多行省略失效问题: **先说一下多行省略和文字居中的基本代码**: .aboutUs-tex ...
jq循环遍历元素的高度，判断超出显示更多按钮
项目场景: jq循环遍历元素的高度,用于判断超出显示更多按钮然后点击展示全部,再次点击控制显示一行问题描述: 第一步:jq循环遍历元素的高度: var divlist=$(".c-clas ...
html多行文本展开更多,仅使用CSS实现带有“显示更多”按钮的多行截断文本
前几天,在办公室的讨论中出现了截断的文字,我想知道CSS是否能够实现该功能,能够正确地截断文本,即支持以下内容: 多行 "显示更多"按钮,点击时展开文本 text-overflow ...
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
文本溢出显示省略号时展示‘查看更多’按钮
问题: 元素宽度100%,宽度会随着浏览器缩放而变化.元素内文本超过4行时显示省略号,同时展示'更多'按钮,点击更多按钮展示全部文本.如下图所示分析: 文本超出4行显示省略号可以通过display ...
uni-app Vue3文字超出规定行数时显示展开和收起功能
一.上图先二.介绍在做uni-app项目的过程中需要实现文字超出规定行数显示展开和收起功能,并且字体大小还可以改变,上个厕所回来之后有了解决办法~~~ 已封装为组件可以控制多少行实现展开收起功能 ...
微信小程序-多行文本省略号并展示查看更多按钮
想要实现的效果如图超过三行则显示省略号并且显示查看全部的按钮. 实现原理,首先让文本全部展示,然后根据文本所在view的高度判断是否超过三行,如果超过则说明如果使用样式会出现省略号.通过设置对应的一 ...
css 实现超出两行、多行文字省略号显示
在我们日常使用文字超出省略号显示,一般使用下面的方式实现,但是当有需求需要实现两行乃至多行时,该怎么实现呢. 单行省略: overflow: hidden; text-overflow: ellips ...

vue 超出多行，省略，展示显示更多按钮

template

script

style

vue 超出多行，省略，展示显示更多按钮相关推荐

最新文章

热门文章