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


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 相关文章推荐
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php上传文件问题汇总
2015/01/30 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python调用fortran模块
2016/04/08 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
高中自我鉴定
2013/12/20 职场文书
2014年底个人工作总结
2015/03/10 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电