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


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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JavaScript 字符编码规则
May 04 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript常用对话框小集
Sep 13 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
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作为Shell脚本语言使用
2006/10/09 PHP
discuz安全提问算法
2007/06/06 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python获取当前路径实现代码
2017/05/08 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python 编码规范整理
2018/05/05 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
安全生产宣传标语
2014/06/06 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
个人专业技术总结
2015/03/05 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
草房子读书笔记
2015/06/29 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
从原生JavaScript到React深入理解
2022/07/23 Javascript