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


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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
javascript操作referer详细解析
Mar 10 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
javascript中的new使用
2010/03/20 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python3编码问题汇总
2016/09/06 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python中新式类与经典类的区别详析
2019/07/10 Python
python区分不同数据类型的方法
2019/10/14 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python post请求实现代码实例
2020/02/28 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
大学四年个人总结
2015/03/03 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
python内置进制转换函数的操作
2021/06/02 Python
golang语言指针操作
2022/04/14 Golang
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS