富文本rich-text如何解决这种图片之间的间距问题？

最新推荐文章于 2024-01-30 14:00:47 发布
原创 最新推荐文章于 2024-01-30 14:00:47 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#rich-text

本文探讨了如何通过调整`<rich-text>`组件样式解决图片间间距问题，展示了具体解决方案，并隐藏了分享菜单。关键在于设置font-size为0来优化布局。

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

富文本rich-text如何解决这种图片之间的间距问题？

解决方案：

解决方案：

<view class="tl-rich">
	<rich-text :nodes="richObj" style="font-size:0"></rich-text>
</view>

解决后效果图：

界面隐藏分享操作：

uni.hideShareMenu()
【unity游戏开发入门到精通——UGUI】文本控件 —— TextetMeshPro新文本控件（TextMeshPro - Text(UI)和TextMeshPro - Text）
向宇
04-20 2370
文本组件是UGUI中最常用的组件，它的作用是对文本数据进行处理并显示。UGUI的文本组件可以分两为种——Text旧文本控件、TextMeshPro新文本组件。本文主要是介绍TextMeshPro新文本控件，而TextMeshPro新文本控件又可以分为两种——TextMeshPro - Text(UI)和TextMeshPro - Text。TextMeshPro是Unity收购的一个第三方插件，现在已经自动内置到编辑器中，只要使用一次就会自动导入到工程。
Richedit 富文本控件的使用
dvlinker的技术专栏
06-09 357
Richedit 富文本控件的使用
微信小程序/unapp使用rich-text图片之间存在间隙以及图片过大问题问题
Gaoju_liz的博客
02-24 1345
微信小程序/unapp使用rich-text图片之间存在间隙以及图片过大问题问题
解决uniapp富文本图片存在间距（app/小程序）
动感超人咸蛋黄博客
01-30 662
我用的u-parse组件。
解决小程序用rich-text渲染图片会显示白色空隙的问题
liaoxianhua888的博客
03-11 815
html: <rich-text v-if="item.name=='img'" :id="item.attrs.id" class="_img" :style="''+handler.getStyle(item.attrs.style)" :nodes="handler.getNode(item,!lazyLoad||imgLoad)" :data-attrs="item.attrs" @tap="imgtap" @longpress="imglongtap" />...
解决uniapp小程序富文本图片存在间隙
m0_49914065的博客
08-18 3026
在uniapp中，某些详情页基本上都会使用富文本编辑，需要注意的样式主要是图片和表格等大小不匹配。解决图片间存在间隙，同时也解决inline-block、inline存在的简写
解决小程序rich-text渲染详情页面图片有间隙的问题
liaoxianhua888的博客
05-01 992
在开发中，我们会发现图片与图片之间有间隙 此时我的解决方法是： 将后端返回的数据为img标签添加style样式 res.info = res.info.replace(/<img /g,'<img style="display:block" ')
微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置
热门推荐
hangGe0111的博客
04-30 1万+
1.背景： 在某些场景下，例如在某些详细信息内容展示数据量特别大的时候（有时候特别小），当数据量特别大的时候，需要做展示固定高度，展开更多内容完全展示，收起内容又还原。当内容特别少的时候，例如小于3行，不展示更多按钮。（小程序内容获取的时候是不能知道当前内容有几行的，可能有人会说，我知道字体大小一行内放几个字，几行就再乘以几，让后台算好，传两个字段，展开收起，分别用两个字段即可，理论上是可行的（...
微信小程序中的富文本（rich-text）中的一些技巧（持续更新）
qq_37046592的博客
05-27 2567
如果不去多用，你就永远不会发现自己有多菜，哈哈哈，记录一下在使用rich-text中遇到的一些问题 1.rich-text中的内容都是一些图片，在显示的时候图片超过屏幕的范围 1）最有效的办法当然是跟后端进行沟通，对数据进行修改。 2）没办法改变后端数据的话，则在获取到数据后我们自己对数据进行一些修改，为图片添加一些样式，下面是一个例子： 屏幕效果： 富文本中的内容： 可以看到图片超过的屏幕的内容，在...
uniapp rich-text
最新发布
02-14
`rich-text` 是用于展示富文本内容的组件，在不同平台上的表现可能会有所差异。此组件支持 HTML 片段作为输入并将其渲染成相应的视图结构。 #### 二、属性说明 - **nodes**: 接收要渲染的内容字符串或对象数组，...
【无标题】微信小程序 rich-text中多张图片之间存在空白的问题
mumu176699的博客
05-14 760
用 rich-text在微信小程序中显示html时，如果多张图片，每张图片之间，会出现很细的一条空白行。img 标签中，添加属性： vertical-align:middle;网上的方案有些是font-size:0,觉的不太方便。
【uni】小程序中富文本中图片之间存在缝隙问题解决
学无止境
03-21 1495
解决方法：将img改为block属性 richtext = richtext.replace(/<img /g, '<img style="display:block;" ')
富文本图片之间有空格的解决方案
objectking的博客
10-25 3367
不知道大家有没有 很奇怪传过来的富文本中的图片，明明没有空格，但是显示在手机上图片都有间距。解决方式很多~ 1.你可以设置font-size:0 这样的解决方式，有一定局限性，假如你的富文本里面有文字的话，文字就会受到影响。 2. vertical-align:middle; vertical-align 属性设置元素的垂直对齐方式。 这个属性可以完美解决。 该属性同样适用于H5 以及 ...
微信小程序のCss（一）
weixin_30325487的博客
01-19 325
一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rp...
如何去除微信小程序 wxParse 解析富文本图片间隙问题
经验之谈，不做搬运工
11-13 891
js文件: //引入 const WxParse = require('../../../wxParse/wxParse/wxParse.js'); //使用 let detail_content = '<div><p>使用的富文本内容</p></div>' WxParse.wxParse('detail_content', 'html', detail_content, _this, 5); wxss文件 @import "../../...
小程序rich-text里多张图片自适应
暖栀的博客
04-19 1万+
&lt;rich-text nodes="{{detail_tb}}"&gt; &lt;/rich-text&gt;这个是wxml里&lt;rich-text&gt;富文本这个写在js里：var _that =this;_that.setData({ detail_tb: res.data.replace(/\&lt;img/gi, '&lt;img style="max-wid...
小程序rich-text 图片太大问题
Pinellia
05-25 1万+
wxml文件下 &lt;view class="find-content"&gt; &lt;rich-text nodes="{{weeklyDetail.content}}" type='text'&gt;&lt;/rich-text&gt;&lt;/view&gt;js文件下 f1.getWeeklyById(id, res =&gt; { let content = res.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值