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


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本身的局限性 别让javascript做太多事
Mar 23 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JS制作图形验证码实现代码
2020/10/19 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python Socket编程详细介绍
2017/03/23 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python版飞机大战代码分享
2018/11/20 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
internal修饰符起什么作用
2013/12/16 面试题
大学生自我鉴定
2013/12/08 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
安全学习心得体会范文
2016/01/18 职场文书