微信小程序文字超过行后隐藏并且显示省略号
在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...)。
只需要在对应的text中设置下面的css就可以了。
overflow:hidden; //超出一行文字自动隐藏
text-overflow:ellipsis; //文字隐藏后添加省略号
white-space:nowrap; //强制不换行
不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的。下面贴出css:
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
只要改变其中-webkit-line-clamp的数字,就可以实现对应的需求了。
微信小程序文字超过行后隐藏并且显示省略号的更多相关文章
- 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...
- 微信小程序获取html内容后展示(C#)
使用场景:微信小程序 具体功能:从服务器获取文章内容 展示在小程序里 使用语言: C# -------------------------------------------------------- ...
- 微信小程序页面跳转后js定时器没有销毁的问题
现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...
- 解决Mac版微信小程序开发工具打开后无法显示二维码
问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...
- 微信小程序 - 文字收缩与展开
wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis' ...
- 关于微信小程序getUserInfo最新修改后,如何在原有项目的授权逻辑的调整
今天一大早调试小程序,结果出现这个...微信小程序也是醉了,这么大的改动,也没有通过开发者服务号通知一声 人在屋檐下不得不低头(改呗,那么如何以最小的代价更新呢,下面给我的解决方案) 原来我们在首次进 ...
- 关于微信小程序更新内容后手机上不能及时显示的办法
这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小 ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
- 微信小程序框架——wepy使后感
更新:2018年1月10日15:32:22 在ios8及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix. 解决方案见链接:wepy-less-autoprefix 另外 ...
随机推荐
- day 02(作业)
作业 1.什么是编程 编程即编写程序,基于某种语法格式将想要实现的事情写出可以让计算机能够理解的文件,文件的集合即为程序.目的是使计算机操作更简单及大众化,提高工作效率. 2.简述计算机五大组成. 控 ...
- 小程序setData数据量过大时候会对渲染有影响吗?
datas:[ { id:1000, name: "帅哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: ...
- 一步步来用C语言来写python扩展
本文介绍如何用 C 语言来扩展 python.所举的例子是,为 python 添加一个设置字符串到 windows 的剪切板(Clipboard)的功能.我在写... 本文介绍如何用 C 语言来扩展 ...
- iar8.32版本关于cmsis的说明
平台是cubemx5.3 keil5.26 带freertos,使用iar8.32,在上图中的use cmsis 打勾与否都能编译通过.
- mapbox-gl空间分析插件turf.js使用介绍
mapbox-gl能够方便地显示地图,做一些交互,但是缺少空间分析功能,比如绘制缓冲区.判断点和面相交等等. turf.js是一个丰富的用于浏览器和node.js空间分析库,官网 http://tur ...
- Verilog Tricks
1,可用generate产生512*FIFO 2,Vivado的warning也要全部排除 3,小module测完再往大module加 4,复位和IDLE处的置零操作一定要写全了 5,设计通信接收机时 ...
- Oracle 后台进程(五)SMON进程
转载自:刘相兵 Maclean Liu 文章 你所不知道的后台进程 SMON 功能 SMON(system monitor process)系统监控后台进程,有时候也被叫做 system clea ...
- webservice 概念+测试案例
webservice的概念?(一句话概括什么是WebService) WebService是一种跨编程语言.跨操作系统平台的远程调用技术.远程调用技术: 远程调用是指一台设备上的程序A可以调用另一台设 ...
- Bzoj 1086: [SCOI2005]王室联邦(分块)
1086: [SCOI2005]王室联邦 Time Limit: 10 Sec Memory Limit: 162 MBSec Special Judge Submit: 1557 Solved: 9 ...
- C语言学习笔记5-程序结构
本系列文章由jadeshu编写,转载请注明出处.http://blog.csdn.net/jadeshu/article/details/50752148 作者:jadeshu 邮箱: jades ...