判断文字超过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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
详解微信小程序调用支付接口支付
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中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python对象属性自动更新操作示例
2018/06/15 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
上级检查欢迎词
2014/01/18 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
运动会稿件100字
2014/09/24 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
我是特种兵观后感
2015/06/11 职场文书
行为习惯主题班会
2015/08/14 职场文书