在小程序开发过程中,经常会遇到一些数据无法在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的数字,就可以实现对应的需求了。

微信小程序文字超过行后隐藏并且显示省略号的更多相关文章

  1. 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理

    前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...

  2. 微信小程序获取html内容后展示(C#)

    使用场景:微信小程序 具体功能:从服务器获取文章内容 展示在小程序里 使用语言: C# -------------------------------------------------------- ...

  3. 微信小程序页面跳转后js定时器没有销毁的问题

    现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...

  4. 解决Mac版微信小程序开发工具打开后无法显示二维码

    问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...

  5. 微信小程序 - 文字收缩与展开

    wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis' ...

  6. 关于微信小程序getUserInfo最新修改后,如何在原有项目的授权逻辑的调整

    今天一大早调试小程序,结果出现这个...微信小程序也是醉了,这么大的改动,也没有通过开发者服务号通知一声 人在屋檐下不得不低头(改呗,那么如何以最小的代价更新呢,下面给我的解决方案) 原来我们在首次进 ...

  7. 关于微信小程序更新内容后手机上不能及时显示的办法

    这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小 ...

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

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

  9. 微信小程序框架——wepy使后感

    更新:2018年1月10日15:32:22 在ios8及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix. 解决方案见链接:wepy-less-autoprefix 另外 ...

随机推荐

  1. Spring入门篇——AOP基本概念

    1.什么是AOP及实现方式 什么是AOP AOP:Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 主要 ...

  2. DeviceSupport 路径

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSuppor

  3. Nginx中ngx_http_fastcgi_module

    转发请求到 FastCGI 服务器器,不不⽀支持 php 模块⽅方式指令:15.1 fastcgi_pass设置 fastcgi 服务器器的地址.地址可以指定为域名或 IP 地址,以及端⼝口Synta ...

  4. [唐胡璐]Selenium技巧 - 定制元素属性检查,并写到ReportNG中

    QTP 和Selenium 都会有这种要检查某一个控件元素属性的情况,比如去检查一个Button的显示文字是什么? 为了更方便的书写程序,并优美的显示到HTML测试报告中,做了以下几个小小的封装,只是 ...

  5. Jquery的toggle()与trigger()方法

    我一直分不清楚toggle()与trigger()两个各自的作用,所以今天抽时间记录一些,以加深印象. 1.toggle() 定义和用法: toggle() 方法切换元素的可见状态.如果被选元素可见, ...

  6. python自动华 (九)

    Python自动化 [第九篇]:Python基础-线程.进程及python GIL全局解释器锁 本节内容: 进程与线程区别 线程 a)  语法 b)  join c)  线程锁之Lock\Rlock\ ...

  7. [Javascript] Nested generators

    To see how to call another generator inside a generator: function* numbers () { ; ; yield* moreNumbe ...

  8. Find a multiple POJ - 2356 【鸽巢原理应用】

    Problem DescriptionThe input contains N natural (i.e. positive integer) numbers ( N <= 10000 ). E ...

  9. 卷积理论 & 高维FWT学习笔记

    之前做了那么多生成函数和多项式卷积的题目,结果今天才理解了优化卷积算法的实质. 首先我们以二进制FWT or作为最简单的例子入手. 我们发现正的FWT or变换就是求$\hat{a}_j=\sum_{ ...

  10. Day1 读题解题提升

    The 2014 ACM-ICPC Asia Mudanjiang Regional Contest 昨晚做了训练赛,然后读题又自闭了QAQ. Average Score ZOJ - 3819 题意: ...