微信小程序实现指定显示行数多余文字去掉用省略号代替


Posted in Javascript onJuly 25, 2018

效果图

微信小程序实现指定显示行数多余文字去掉用省略号代替

实现

wxml
  <view class='goods-details'>
    <text class='goods-details-title'>商品详情</text>
    <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你如安好,异国他乡,年少夫妻,无比恩爱,她不小心失去了第一个孩子,他安慰她:“没关系,我答应你,我们还会再有孩子。”碾转数年,他留你如安好,便是晴天你如安好你如安好,便是晴天你如安好,异国他乡,年少夫妻,无比恩爱,她不小</text>
  </view>

wxss

.goods-details {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 20rpx;
  background-color: #fff;
}
.goods-details-title {
  color: #333;
  font-size: 34rpx;
  font-weight: 700;
  margin-left: 24rpx;
  margin-top: 20rpx;
}
.goods-details-content {
  display: -webkit-box;
  color: #4d4d4d;
  margin-left: 24rpx;
  margin-right: 24rpx;
  margin-top: 24rpx;
  line-height: 52rpx;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.content-all {
}
.content-breif {
  -webkit-line-clamp: 4; //显示几行
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowAllContent: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  showAllAction: function() {
    this.setData({
      isShowAllContent: !this.data.isShowAllContent
    })
  }
})

详细css讲解

-webkit-line-clamp

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

为了实现该效果,它需要组合其他外来的 WebKit 属性。常见结合属性:

•display: -webkit-box: 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
•-webkit-box-orient: 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
•text-overflow:可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

overflow

规定当内容溢出元素框时发生的事情。所有主流浏览器都支持 overflow 属性。可以取下面几个值:

•visible: 默认值。内容不会被修剪,会呈现在元素框之外。
•hidden: 内容会被修剪,并且其余内容是不可见的。
•scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
•auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
•inherit: 规定应该从父元素继承 overflow 属性的值。

word-break

规定自动换行的处理方法。可以取下面的值:

•normal 使用浏览器默认的换行规则。
•break-all 允许在单词内换行。
•keep-all 只能在半角空格或连字符处换行。

text-overflow

规定当文本溢出包含元素时发生的事情。取值如下:

•clip:修剪文本。
•ellipsis: 显示省略符号来代表被修剪的文本。
•string: 使用给定的字符串来代表被修剪的文本。(ps:试过,小程序里面咋没有效果???)

white-space

另外额外介绍下该元素,文本不进行换行(也就是只有一行),可以这么操作:

p{
 white-space: nowrap
 }

总结

以上所述是小编给大家介绍的微信小程序实现指定显示行数多余文字去掉用省略号代替,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
js实现九宫格布局效果
May 28 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
You might like
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jquery easyui使用心得
2014/07/07 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python实现聊天小程序
2018/03/13 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
什么是Web Service?
2012/07/25 面试题
广告学专业应届生求职信
2013/10/01 职场文书
挂职思想汇报
2013/12/31 职场文书
运动会演讲稿200字
2014/08/25 职场文书
小学生毕业评语
2014/12/26 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
委托书范本格式
2019/04/18 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS