微信小程序：多行文本溢出出现多余的文字-webkit-line-clamp

彭世瑜

已于 2022-03-31 14:44:04 修改

阅读量2.4k

点赞数

文章标签： javascript 前端 npm

于 2022-03-31 14:43:37 首次发布

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/123871717

版权

多行文本溢出隐藏css样式

.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*限制文本行数*/
  -webkit-box-orient: vertical;
  word-break: break-all; /* 追加这一行代码 */
}

模拟器上表现良好，iOS真机测试发现有文字漏出来了
在这里插入图片描述
将文本高度设置为自动就正常了

line-height: normal

在这里插入图片描述

参考
设置line-height:1并设置超出省略时，ios出现内容溢出

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

彭世瑜

关注关注

0
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

一万年太久 - 只争朝夕

12-05

2万+

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

微信小程序 - 详细实现view/text文字过长导致溢出问题，解决当文本太多时自动隐藏并显示三个点超出显示省略号，小程序文本溢出不生效解决办法，可指定显示行数多余文字去掉用省略号代替（定义多少行隐藏

王二红

10-16

809

微信小程序，vue2，vue3，多行文本溢出，文字多出部分显示三个点，超出后隐藏并用省略号代替，微信小程序 文字超出view宽度后、超过行数后隐藏显示省略号，微信小程序实现多行文字超出部分省略号显示功能，显示固定字数省略号表示多余部分，TextView最大长度限制,超出部分省略号显示，小程序网页view多行文本超出隐藏或显示省略号，微信小程序超出省略号，最新，不生效怎么办，超过 2 行显示省略号，微信小程序实现指定显示行数多余文字去掉用省略号代替，小程序超出三行省略并在后面显示展开收起，微信小程序文字超出

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

微信小程序文本溢出省略号问题

weixin_45359987的博客

07-12

879

【代码】微信小程序文本溢出省略号问题。

React项目使用-webkit-line-clamp，超过指定行...展示

最新发布

caisexi的博客

03-14

169

属性时，可能会遇到不生效的问题。这通常是因为在编译或打包过程中，这些非标准属性被自动过滤掉了。下面写法是其中一种解决方案，注释必须包含。来告诉Autoprefixer不要过滤掉。在React项目中使用。

微信小程序多行文本溢出

qq_44371705的博客

11-26

712

文本溢出单行文本溢出样式wxml结构wxss样式代码效果图多行文本溢出样式wxml结构wxss样式代码效果图此样式同样适用于html css,只是微信小程序和html结构元素标签不同单行文本溢出样式 wxml结构 <scroll-view enable-flex scroll-x class="scrollContainer"> <view class="scrollItem" wx:key="id" wx:for="{{recommendedSongList}}"> &l

【微信小程序】富文本多行溢出显示省略号(扩展一下flex/text溢出显示）

记录

03-22

1084

对于展示的Html字符串内容，需要限制其行数。

小程序 cavans 多行文本溢出隐藏

web_ding的博客

09-09

384

//将内容做多行文本折行处理 const ctx = wx.createCanvasContext('share', this) var text = content; var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; //最后的...

微信小程序display: -webkit-box设置多行文本溢出，文本前多出一行空行

qq_43735767的博客

06-18

1165

做一个多行文本溢出效果

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

10-16

在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...

微信小程序实现指定显示行数多余文字去掉用省略号代替

10-18

在微信小程序开发中，实现指定显示行数并用省略号代替超出的多余文字是一种常见的文本显示需求。当文本内容超出特定范围时，通常希望以一种优雅的方式显示给用户，比如显示固定行数的文字，并用省略号（...）代替...

详解white-space，以及解决微信小程序中文字溢出与省略号显示问题

m0_73856514的博客

01-21

1836

单行文本溢出显示省略号： white-space: nowrap; /* 先强制一行内显示文本 */ overflow: hidden; /* 超出的部分隐藏 */ text-overflow: ellipsis; /* 超出的部分使用省略号代替 */

微信小程序：实现用户输入多行文字的功能

mingangel的博客

06-01

1008

微信小程序：实现用户输入多行文字的功能。使用. 其次需要实现记忆存储的功能，则需要进行打开页面即调用存储的内容。使用wx.setStorageSync进行保存内容，wx.getStorageSync进行调用。

微信小程序中rich-text文本溢出（三个...）

weixin_30852451的博客

07-10

1819

小程序中当rich-text中数据较多时就会出现溢出的现象如下此时的页面效果并不是很理想我们可以在数据中给个div <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">55555555555555555555555555555555555</div...

微信小程序解决富文本溢出问题

m0_47584616的博客

08-20

456

//接收后台接口返回来的值 this.setData({ rich: res.data.replace(/\<img/gi, '<img class="richImg" ') }) .richImg { width: 100%; height: auto; } 但是这种方法返回的图片有默认宽度的时候无效 formatRichText(html){ let newContent= html.replace(/<img[^>]*&.

小程序和HTML的单行，多行文本溢出隐藏

douyiqing的博客

03-04

975

在前端开发以及小程序开发中，单行，多行文本溢出隐藏经常用到。接下来我就把我知道的几种情况整理出来以供大家参考。 微信小程序 多行text文本溢出隐藏 display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; // 你想要的行数 overflow: hidden; ...

微信小程序内解决view内文字过多溢出

Pumily的脱发历程

10-16

4070

【代码】微信小程序内解决view内文字过多溢出。

小程序进阶-长（多行）文本内容展开与收起、单行文本溢出隐藏

weixin_43166227的博客

07-01

4458

多行文本和单行文本内容溢出隐藏，多行文本展开与收起。

微信小程序大段文本内容过多，实现折叠与展开效果解决方案以及多行文本溢出隐藏不生效的解决方案

XH_jing的博客

10-15

8699

实现场景：一个列表的文章内容过长，显示的时候要省略显示，但是还要有一个展开查看全文的点击事件，可以实现展开与折叠。实现思路：使用两层容器，父标签设置max-height，预计成要显示行数的高度，并且使用overflow:hidden; 溢出隐藏；然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度，如果子标签的高度高一些，就显示这个展开按钮； 2.1 针对使用wx:for循环来渲染的列表，可以在wx:for的标签上，加个class，s

微信小程序 - ＜textarea＞多行文本输入框 placeholder 属性换行显示文字（样式修改的详细教程）

王二红

10-20

9532

解决微信小程序input框placeholder换行textarea，wechat小程序textarea的placeholder如何换行，vant-weapp组件库Field输入框组件van-field的placehold怎么换行？,微信小程序中如何设置textarea中的placeholder换行显示，cssinput输入框placeholder样式的修改，怎么让textarea的灰色placeholder换行显示描述呢，微信小程序-textarea多行文本输入框placehol

微信小程序多行文本溢出隐藏

01-01

### 微信小程序中多行文本溢出隐藏的解决方案在微信小程序中处理多行文本溢出隐藏问题，可以利用CSS样式来控制文本显示行为。对于单行文本溢出，可以通过设置`text-overflow: ellipsis; white-space: nowrap; overflow: hidden;`等属性实现[^1]。然而针对多行文本的情况，则需采取不同策略： #### 使用纯CSS方法（适用于部分浏览器） ```css .multi-line-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 控制最大行数 */ overflow: hidden; } ``` 此段代码能够有效截断超过指定行数的文字，并自动添加省略号标记。但是需要注意的是，在某些环境下该方式可能无法正常工作，特别是涉及到跨平台的小程序应用时。因此推荐采用更稳健的方式——通过JavaScript逻辑配合wxml结构共同完成这一需求[^2]。 #### 结合WXML与JS的方法这种方法不仅解决了兼容性问题，还提供了更好的用户体验，比如“查看全部”按钮的功能。下面是一个简单的例子说明如何做到这一点: ##### WXML文件片段 ```html <view class="content">  <text decode="{{true}}" wx:if="{{!showAll}}">{{shortContent}}</text> <text decode="{{true}}" wx:else>{{fullContent}}</text>  <button bindtap="toggleShow"> {{ showAll ? '收起' : '查看全文'}} </button> </view> ``` ##### JS页面逻辑 ```javascript Page({ data: { fullContent: "这是一篇很长的文章，这里只是其中一部分的内容预览...", shortContent: "", showAll: false, }, onLoad() { const maxLength = 80; // 自定义摘要长度 this.setData({ shortContent: (this.data.fullContent.length > maxLength) ? `${this.data.fullContent.slice(0, maxLength)}...` : this.data.fullContent }); }, toggleShow() { this.setData({ showAll: !this.data.showAll }); } }); ``` 上述代码实现了根据设定的最大字符数量裁剪文章内容，并提供了一个切换视图状态(`showAll`) 的函数用于响应用户的交互操作，从而达到点击按钮后展开或收缩文本的效果[^3]。