判断文字超过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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
jquery ui对话框实例代码
May 10 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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入门的学习方法
2007/01/02 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP 图片处理
2020/09/16 PHP
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python配置文件写入过程详解
2019/10/19 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python while true实现爬虫定时任务
2020/06/08 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
python中spy++的使用超详细教程
2021/01/29 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
教师自我反思材料
2014/02/14 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers