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


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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
Cakephp 执行主要流程
2010/03/24 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
php自定义时间转换函数示例
2016/12/07 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python中的is和id用法分析
2015/01/26 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python爬取网易云音乐评论
2018/11/16 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python实现计算器简易版
2020/12/17 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
银行优秀员工事迹
2014/02/06 职场文书
真诚的求职信
2014/07/04 职场文书
中学生检讨书范文
2014/11/03 职场文书
稽核岗位职责范本
2015/04/13 职场文书
交通事故代理词范文
2015/05/23 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
对讲机知识
2022/04/07 无线电
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python