微信小程序过滤器（限制文字字数）

最新推荐文章于 2025-01-01 17:49:05 发布

原创

最新推荐文章于 2025-01-01 17:49:05 发布 · 974 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #过滤器 #限制字数

本文介绍如何在微信小程序中创建一个过滤器，用于限制显示的文字字数。通过分享的`utils/filter.wxs`代码段，可以轻松地在WXML模板中应用此功能，实现文字内容的简洁展示。

话不多说贴代码~
utils/filter.wxs

//局部组件过滤器
var abbreviationEight = function (value) {
   
   
  //实现文字只显示8个字符
  if (value.length > 8) {
   
   
    return value.slice(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

娜娜�^ _ ^

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序-----文本溢出

一万年太久 - 只争朝夕

12-05

2万+

文本溢出是一个非常常见的问题，尤其是在手机端上这是理想中的状态，但是对于长标题来说，可能就要崩溃了轻者换行重者样式崩坏当一行文字超过了限定范围，就会出现换行等现象，这就叫文本溢出该如何解决文本溢出呢，其实只要短短一块css代码即可现在界面好看了吧（至少从我的审美出发还可以）超出的范围会用“…”来代替友情提示：一定要设定宽度，才会有效果有单行溢

限制editext输入的字符数不超过140个字符

一站到底s的博客

06-03

1396

这个功能的实现也是查阅前辈们留下的资源，希望在此记录下来，供其他人查阅，希望可以帮助到需要的人。代码如下：该方法是借助EditText的TextWatcher来实现。 EditText comments; //方法的引用 comments.addTextChangedListener(new MaxLengthWatcher(140, comments));

参与评论您还未登录，请先登录后发表或查看评论

小程序文字超出限定字数显示···

weixin_45483535的博客

08-06

1956

UI图的超出限定字数显示为···，而不是普通的…，于是自己封装了一个函数 /** * 截取文字长度 */ cutTextLong(text, num) {//text为传入文本，num为需要留下的文本长度 if(text.length>num) { return text.slice(0,num?num:11)+'···' }else { return text } }, 如果只需要显示普通的…通过css即可完成，3行代码~ text {

微信小程序Text限定行数

houruoyu3的博客

08-20

2323

前言 : 今天做小程序，正好需要实现text最多显示两行，多出就省略号的情况。 .cate-item .item .name { flex: 1; margin-left: 12px; margin-right: 30px; font-size: 30rpx; color: #333; font-weight: bold; text-align: left; /* 定义为自适应布局 */ display: -webkit-box; /* 超出

微信小程序——CSS限制文字宽度和行数（溢出显示省略号）

XSL_HR的博客

06-01

3557

手把手教你学会用CSS限制文字宽度和行数

【微信小程序】文本域输入带最大字数限制（1/100）

m0_55546349的博客

07-18

2551

【微信小程序】文本域输入带最大字数限制（1/100）

微信小程序富文本显示指定字数文本

weixin_48787059的博客

02-19

1131

文章目录前言实现代码二、使用步骤1.引入库2.读入数据总结前言最近不是太忙，就翻了翻之前写的项目，分享一些学到的东西，之前写过的一个小程序，有要求一段文本显示指定字数，多出文本的用省略号代替这样的需求,说实话，没写过这样需求，也是搜集了大量博客文档才找到好用的方法，亲测有用哦！如果是你想要的需求，就请看一下这篇博客吧！实现代码我用的是过滤器因为是富文本，需要先将富文本转为普通文本，然后再利用splice方法截取指定字数的文本然后加上省略号实现代码,如下 // An highlighted b

微信小程序富文本去除首行缩进样式_如何去除富文本中的html标签及vue、react、微信小程序中的过滤器...

weixin_36427956的博客

12-30

599

在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过1.富文本去除html标签去除html标签及空格let richtext = ' sdaflsjf的丰富及饿哦塞尔dsfjlie';/* 去除富文本中的html标签 *//* *、+限定符都是贪婪的，因为它们会尽可能多的匹配...

微信名片小程序开发

weixin_63945098的博客

01-01

708

微信名片小程序

微信小程序文字框字数怎么设置

最新发布

12-13

我们正在讨论微信小程序中设置文字框字数限制的方法。根据用户的问题和提供的引用，我们可以总结出以下几种方法： 1. 使用`maxlength`属性（最常用且简单） 2. 通过JavaScript函数截取字符串（自定义截取逻辑） 3. ...

微信小程序字数限制

weixin_42388503的博客

07-19

8724

<view class="xinxi"> <textarea placeholder='请提供详细的设备故障信息' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> <text class="currentWordNumber">{{currentWor

Python-Abbreviations一部缩写词典

08-09

Abbreviations一部缩写词典

微信小程序 字数过长显示省略点

风吹过的博客

06-10

5395

css： .text{ /*固定宽度*/ width: 100rpx; /*超出部分隐藏*/ overflow:hidden; /*不换行*/ white-space:nowrap; /*添加...*/ text-overflow:ellipsis; } wxml: <viewclass=text" >字数过长字数过长字数过长字数过长字数过长字数过长字数过长字数过长字数过长</view> ...

微信小程序开发之css实现文字限制加省略号

兴华的博客

03-13

6862

css实现首行文本缩进：text-indent:2em;实现文字限制并在末尾自动添加省略号：overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; -webkit-line-clamp:1;是显示多少行数加省略号；还有一种是强制...

小程序-文字超出限制

梦里回忆-专栏

01-24

1万+

微信小程序-文字超出限制如何在末尾加省略号特意为了这一个功能点来记笔记。当文字超出一行时会自动换行那如何让文字不自动换行并在末尾加上省略号呢？我查资料的时候搜到这个博客 http://blog.youkuaiyun.com/u010168409/article/details/54429678 原贴的答案是这样的 text { display: -webkit-box; w...

微信小程序textArea组件字数限制

qsj0606的博客

08-13

2120

在写小程序的过程之前，我们经常能遇到输入区域的字数限制问题，今天就来看一下如何限制textArea的字数实现效果 wxml <view class="xinxi"> <textarea placeholder='请提供详细的设备故障信息' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> <text class="currentWordNumber">{{currentWord

微信小程序字数过多隐藏并显示省略号

少爷、的博客

06-08

1755

效果图如下：在对应text所属的view中设置如下CSS： overflow: hidden; /* 超出一行文字自动隐藏 */ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/ 不过上面的css只能保证单行显示隐藏，如果想要2，3，n行隐藏，设置如下代码： display: -webkit-box; overflow: hidden; text-overflow: ellipsis; wo

微信小程序输入框限制字数

josnmakechen的博客

08-11

3100

想实现的效果如上图 wxml: <view class='suggest_title'>请输入你想反馈的问题</view> <view class='suggest_box'> <textarea class='suggest_text' bindinput="bindText" maxlength='200' placeholder='我们有什么地方让您不满意，请输入您的反馈意见' placeholder-class='sug_p'...

微信小程序-文字超出限制如何在末尾加省略号