微信小程序ellipsis省略效果

本文介绍了在微信小程序中实现文本省略的四种不同方法,包括将text设置为block、使用-webkit-box布局、外层包裹view设置flex以及利用rich-text富文本。详细展示了对应的wxml和wxss代码示例,每种方法的效果略有差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

4种方法,但效果有差别。第一种和第三种效果一样

wxml:、

<text class="tt" >{ {textContent}}</text>

js:

data:{

textContent:"朱自清《荷塘月色》\n路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己,到了另一世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫旳月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。\n曲曲折折的荷塘上面,弥望旳是田田的叶子。叶子出水很高,像亭亭旳舞女旳裙。层层的叶子中间,零星地点缀着些白花,有袅娜(niǎo,nuó)地开着旳,有羞涩地打着朵儿旳;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水,遮住了,不能见一些颜色;而叶子却更见风致了。"

}

1、第一种方法 text设置成block

wxss:        

.tt{

  display: block;

  overflow:hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值