微信小程序实现多行文字超出部分省略号显示功能


Posted in Javascript onOctober 23, 2019

在开发小程序: 澳买 的 时候 遇到一个棘手的问题:

当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长

我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示

出来也不太美观。

这时候我们就需要一个功能:比如设置只显示2行,2行显示不下的情况下我们

用省略号... 来替代,这样显示比较美观好看,显示效果如下

微信小程序实现多行文字超出部分省略号显示功能

其实实现也是比较简单的

工程中样式文件.wxss内容如下:

.productNameText {
 color: rgb(32, 27, 27);
 font-size: 35rpx;
 text-overflow:ellipsis;
 z-index: -1;
 display: -webkit-box;
 word-break: break-all;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
}

这里-webkit-line-clamp: 3; 主要控制要显示的行数

wxml 文件内容如下:

......

<!-- produdct name -->
 <view class='productNameView'>
 <text class='productNameText'>{{item.name}}</text>
 </view>

总结

以上所述是小编给大家介绍的微信小程序实现多行文字 超出部分省略号显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 #Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 #Javascript
原生JS无缝滑动轮播图
Oct 22 #Javascript
Vue实现开心消消乐游戏算法
Oct 22 #Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 #Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Js+XML 操作
2006/09/20 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python的Template使用指南
2014/09/11 Python
Python之PyUnit单元测试实例
2014/10/11 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
机器学习python实战之决策树
2017/11/01 Python
Python实现元素等待代码实例
2019/11/11 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
2014年老干部工作总结
2014/11/21 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书