微信小程序rich-text里面写多行溢出显示省略号在ios中不显示的问题

最新推荐文章于 2024-02-22 10:27:36 发布
最新推荐文章于 2024-02-22 10:27:36 发布
阅读量358 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinge0508/article/details/133125232
版权
文章讲述了在微信小程序的rich-text组件中遇到的文本溢出在iOS上不显示省略号的问题，提供了解决方案，即使用特定的行内样式包括`overflow`,`text-overflow`,`-webkit-line-clamp`等属性来实现内容限制和省略显示。
摘要由CSDN通过智能技术生成

问题：微信小程序rich-text里面写多行溢出显示省略号在ios中不显示的问题
解决方法：需要给一个默认的div标签，在div写行内样式

overflow : hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 word-break: break-all; 

<rich-text nodes="<div style='<div style='overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;word-break: break-all; '>项目名称：{{course.project_name}}</div>"></rich-text> 



 

汉武大帝·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
富文本解析-微信小程序 rich-text 组件
03-29
微信小程序富文本解析器 微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。 这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但 title 字段中有加重提示的几个文字是需要标红的。 这种情况下后端如果不返回富文本，前端去在小程序去处理是比较麻烦的，还得定个规则，前端再写好样式拼接起来。如果后端直接给你返回富文本，用这个去解析可以直接搞定。 如官网给的例子： (此图片来源于网络，如有侵权，请联系删除! ) = 如何才能将 HTML 转为微信小程序组件支持的数据格式呢？
IOS兼容超出部分省略号
King的博客
04-27 2697
问题描述： 在IOS手机中，使用如下代码显示省略号不生效： overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 解决办法： overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; 另附超过部分在第二行省略号、第三行省略号代码： no-wrap-two()
小程序富文本多行文本溢出显示省略号真机IOS无效问题
weixin_48772762的博客
01-21 4970
小程序富文本多行文本溢出省略号ios真机无效问题 之前写小程序遇到富文本多行文本溢出省略号iso无效问题,因为返回的是富文本所以用v-html渲染在页面上，在模拟器上一点问题没有，唯独到了ios真机测试是没效果的，安卓倒是没问题 页面渲染方式 <div class="rice-text"> <div v-html="coupon.USE_DESC" > </div> </div> css样式 .rice-text{ width: 100%; he
小程序文本超出一行显示省略号…省略号居中问题
qq_41902028的博客
05-07 2319
小程序文本超出一行显示省略号… 平常都是直接css操作如以下就行了，但是细心的产品发现一个平时被忽略的问题，安卓和ios的省略号显示效果不一样，安卓的…是居中显示，ios的下沉显示！这个有办法让安卓像ios一样下沉显示吗？ overflow:hidden;//超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap;//强制...
微信小程序--单行文本、多行文本溢出变省略号...
qq_62328748的博客
08-25 619
关于单行文本溢出问题和多行文本溢出问题的解决方法，一看就懂。
微信小程序 文字超过行后隐藏显示省略号
最新发布
weixin_43859511的博客
02-22 1184
【代码】微信小程序 文字超过行后隐藏显示省略号。
小程序rich-text多行省略
u013611033的博客
11-25 773
返回数据为HTML字符串,需要在rich-text渲染, 如果直接给rich-text设定宽高,给多行省略的css样式,并不会起效果,需要单独添加一个html字符 <rich-text nodes="<div style='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>{{html}}</div>" bindtap="tap"></rich-text> ...
微信小程序rich-text富文本用法实例分析
10-16
微信小程序的`rich-text`组件是用来展示富文本的，它允许开发者在小程序中插入和显示包含HTML元素的复杂文本内容。这个组件从基础库1.4.0版本开始引入，对于低版本的小程序，需要进行一定的兼容性处理。在使用`rich-...
微信小程序实现多行文字超出部分省略号显示功能
10-16
主要介绍了微信小程序实现多行文字 超出部分省略号显示功能，比如设置只显示2行，超出部分省略号显示，本文通过实例代码给大家介绍,需要的朋友可以参考下
微信小程序 rich-text的使用方法
08-29
主要介绍了 微信小程序 rich-text的使用方法的相关资料,这里提供属性及方法并实现实例，帮助大家学习理解，需要的朋友可以参考下
2022-12-23 工作记录--CSS-超出多行显示省略号ios真机偶失效问题
weixin_48850734的博客
12-23 2746
CSS-超出多行显示省略号ios真机偶失效问题
微信小程序 - 单行/多行文本省略号
idomyway的博客
07-22 1600
多行文本省略号 .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 3; /* 行数*/ -webkit-box-orient: vertica...
设置多行文本超出显示省略号，在手机端兼容问题，超出部分无法隐藏解决方法...
weixin_30607659的博客
07-13 1929
之前写过多行文本超出显示省略号，现在用之前的方法会出现iphoneX会出现超出部分无法隐藏。设置了好多个方法，都不能修复，终于发现这个方式可行。 font-size: .22rem line-height: 0.29rem height:0.56rem display: -webkit-box -webkit-line-clamp: 2 -webkit-box-orient: v...
微信小程序的授权登录功能
yinge0508的博客
02-08 9138
注意：首先微信小程序是不能一进入小程序就让用户授权登录的，一进入小程序就让用户授权登录，是审核不通过的； 图一的这个提示框是我自己写的；要想弹出微信的微信授权提示框，必须用一个按钮来触发，可用授权登录这个按钮来让微信授权这个弹窗显示，具体代码如下： index.wxml <view class="tc" wx:if="{{isShow}}" bindtap="hidden"&...
微信小程序实现多国语言的切换
yinge0508的博客
02-06 8643
在步骤1中有四个js文件，分别是“_hanyu.js”，“_riyu.js” ，“_ying.js”，“_zhong.js”,写在onShow生命周期函数中每次进入该页面，都加载数据，虽然降低了性能，但是保证切换语言之后，页面的文字能随时变化；这样页面js文件的data对象里就有了对应语言的数据，在wxml页面中可以通过双花括号获取数据；-------单选按钮的详细部分在其他文章中说明-----2，新建base.js文件，位置和app.js同级别即可，也可自行安排位置；每个js文件内容和下面的图片类似；
微信小程序radio-group 组件的使用
yinge0508的博客
02-06 8523
效果图： wxml 文件代码如下： <view class="change"> <radio-group class="block lang_btn" bindchange="changeLanguage"> <view class="cu-form-group margin-top"> <view class="lef...
微信小程序更新数组数据，页面不刷新问题
yinge0508的博客
10-06 7319
微信小程序更新数组数据，页面不刷新问题
微信小程序使用第三方插件
yinge0508的博客
06-20 6242
微信小程序使用第三方插件
微信小程序中的列表渲染，动态设置class类 ,style样式，在元素上绑定数据
yinge0508的博客
03-15 2752
微信小程序——列表渲染wx:for <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 也可以使...
微信小程序rich-text
07-27
微信小程序中的rich-text组件用于展示富文本内容，支持显示HTML标签和样式。你可以在小程序的wxml文件中添加rich-text组件，并在对应的js文件中设置content属性来指定要显示的富文本内容。 例如，在wxml文件中添加rich-text组件： ```html <rich-text nodes="{{content}}"></rich-text> ``` 然后，在js文件中设置content属性，将要显示的富文本内容赋值给它： ```javascript Page({ data: { content: '<div style="color: red;">Hello, <strong>world!</strong></div>' } }) ``` 在上面的例子中，rich-text组件将会显示一个红色的文字"Hello, world!"，并且"world!"会以粗体显示。 需要注意的是，不是所有的HTML标签和样式都被支持。在微信小程序的官方文档中，你可以找到更详细的说明和支持列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值