判断文字超过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 相关文章推荐
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php使用session二维数组实例
2014/11/06 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
js 文件引入实现代码
2010/04/23 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python 控制语句
2011/11/03 Python
python使用turtle绘制分形树
2018/06/22 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python实现学生管理系统开发
2020/07/24 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
高三生物教学反思
2014/01/25 职场文书
学生会干部自荐信
2014/02/04 职场文书
网络技术专业求职信
2014/02/18 职场文书
毕业大学生自荐信
2014/06/17 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技