微信小程序文字超过行后隐藏并且显示省略号

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

原文地址:https://www.cnblogs.com/joe235/p/11322982.html

时间: 2024-10-05 05:25:47

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

微信小程序开发者工具升级后,控制台WXMLRT_$gwx:./

之前微信小程序开发者工具wx:key="*this"或者写唯一的标识,控制台也没有问题,但是在一两月之前吧,也许很久,发现这个问题了.我就降级开发者工具,避免了此问题. 但是这不是根本解决问题的方法,无奈一直提示我更新版本,我更新后就一直刷刷的报这个问题: 现在写具体修改方法: wx:key="index" 这样既可.[把页面涉及到的wx:for="{{list}}" wx:key="*this"统一修改为 wx:key=&q

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

这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小程序的更新机制有关的,因为小程序的更新机制是异步的,所以说部分用户不会马上应用上新版本. 小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」. 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动:冷启动指的是用户

[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar

解决办法: 小程序全局配置app.josn增加选项:"navigationStyle": "custom", ~ 具体如下: 原生小程序开发> 打开 app.json: { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": "

小程序-超过长度自动隐藏并显示省略号

overflow: hidden; /*超过长度自动隐藏*/ text-overflow: ellipsis;/*添加省略号*/ white-space:nowrap;/*不换行*/ 注意:必须用text标签才能出现省略号,view不行 font-family:字体名 可以选择字体,具体需要去百度上面找 原文地址:https://www.cnblogs.com/Falling-snow/p/10089539.html

微信小程序文字滚动marquee

data: { text: "如果预约时间不能到店则需要提前两个小时取消预约,如不足两个小时可联系技师取消预约", marqueePace: 0.5,//滚动速度 marqueeDistance: 0,//初始滚动距离 marquee_margin: 0, size:28, interval: 20 // 时间间隔 }, onShow: function () { var that = this; var length = that.data.text.length * that.da

小程序之 发布成功后地图不显示

昨天小程序发布成后,碰到了一个问题 有一个页面运用了腾讯地图,发布后呢就没有数据(体验版本未打开调试是没有数据,打开调试后就有数据) 解决方案 ?????? 登陆微信公众平台   找到左侧最下面的设置  -> 开发设置 ->  服务器域名里面把腾讯地图的地址给加上去就ok了 原文地址:https://www.cnblogs.com/liancat/p/9639518.html

CSS文本超出2行就隐藏并且显示省略号

今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得. 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -web

微信小程序文字超出加省略号

我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 } 原文地址:https://www.cnblogs.com/520BigBear/p/9308549.html

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制