判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号


Posted in Javascript onApril 28, 2019

在进行H5页面开发时,项目都要提测了,产品却加了个点击展开和点击收起的需求。。 上知乎看了下 ,也有人有这样的疑问,今天我就把问题给解决啦~

这里就来讲述下我的解决方案:

利用多行溢出实现“展开”“收起”

多行溢出省略Css:

overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;

设计是这样的。。

判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号

点击展开.png

判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号

点击收起.png

接下来我来讲讲我的实现

<div class="review">
 孙燕姿导师评语:这位同学唱功基础扎实,转音和高低音的切换非常自然,整首歌曲感情饱满,非常不错。整首歌曲感情饱满,非常不错。整首歌曲感情饱满,非常不错。
</div>
<style>
.review{
  padding-top: .2rem;
  padding-bottom: .1rem;
  margin-left: .9rem;
  font-size: .32rem;
  color:#b85423;
  line-height: 1.5em;
  position: relative;
}
.ellipsis{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spread{
  padding-right: .2rem;
  position: absolute;
  bottom: .09rem;
  right:0;

}
.spread i{
  width: .2266rem;
  height:.2266rem;
  display: inline-block;
  vertical-align: middle;
  background-image: url(/cdn_img/plusSprite.png);
  background-repeat: no-repeat;
  background-size: .2266rem .72rem;
}
.spread i.plus{
  background-position: 0 0;
}
.spread i.reduce{
  background-position: 0 -0.4933rem;
}
</style>
$('.teacher-review').forEach(function(v,i){
  // 引入flexible.js 进行移动端适配 
  // 根据flexible 获取rem 即 window.rem
  if(v.clientHeight > (1.27*window.rem)){
    var el = document.createElement('span');
    el.innerHTML = '... <i class="plus"></i>点击展开';
    el.className = 'spread';
    // 由于每条评论相间背景
    el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358';
    v.appendChild(el);
    // multi 是显示溢出的标志
    $(v).addClass('ellipsis multi') 
  }
})
// 点击判断收起还是展开
$('.review').on('click','.multi',function(e){
  var $this = $(this)
  if($this.hasClass('ellipsis')){
    $this.removeClass('ellipsis').find('span').html('<i class="reduce"></i>点击收起');
  }else{
    $this.addClass('ellipsis').find('span').html('... <i class="plus"></i>点击展开');
  }
})

结果是这样的。。。。

判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号

这里讲解下展开收起的思路:

出现展开的情况是因为内容溢出,那内容没溢出就不需要显示“点击展开的按钮啦”,好心烦,突然接到需求,都没心情热饭吃。。

热饭过程中灵感一闪,有了!判断下内容的高度,只要大于指定的高度就能解决溢出显示“点击展开”,不溢出就不显示。

这里的multi class 是为了区分内容溢出还是没溢出~~~~

如果内容显示溢出就加个ellipsis class,一旦点击,判断存在ellipsis class 说明内容溢出啦 ,这时候移除ellipsis class 就展开内容了 是不是很简单。 剩下的就不说了,大家应该都明白了~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 #Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 #Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 #Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
javascript实现密码验证
2015/11/10 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Django框架表单操作实例分析
2019/11/04 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python实现图片转字符画
2021/02/19 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
学生实习推荐信范文
2013/11/26 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
运动会获奖感言
2014/02/11 职场文书
优秀实习生感言
2014/03/01 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP