解决uniapp小程序富文本图片存在间隙

常德_威少

已于 2022-08-18 16:13:08 修改

阅读量3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： uni-app javascript 前端

于 2022-08-18 15:49:52 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49914065/article/details/126407294

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中利用font-size:0来消除内联元素如inline-block、inline之间的间距问题。这种方法相比margin负值、letter-spacing、word-spacing和浮动等其他解决方案更为简便有效。实践中，可以通过在父元素设置font-size:0来实现，例如在rich-text组件中应用此样式可以解决元素间的间隔问题。

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

css中font-size为0的妙用（消除内联元素间的间隔，像：inline-block、inline）

当内联元素在一行挨着排列时，两个之间会有间距，解决办法就是在它们的父元素添加一个 font-size：0；就可以让它们这之间没有间距。
在这里插入图片描述
解决方法还有一些，例如：margin负值 , letter-spacing, word-spacing,浮动等但是最佳的解决方案还是font-size:0

实践运用
在这里插入图片描述
方式一，适用于parser组件（推荐）
rich-text 给样式font-size:0;即可解决-实践成功

<parser :html="detail" style="font-size: 0;"/>
<!-- <rich-text :nodes="detail" style="font-size: 0;"></rich-text> -->

方式二（不推荐，本人在使用时不生效）

let IsReg = new RegExp('<img', 'gi'); //表明规则  表格则是< table 
//放入本地data中
this.DataMsg=res.data  //获取到数据
//将图片的宽度改为合适的宽度   如果display：block 则可以独占一行显示
this.DataMsg= _this.DataMsg.replace(IsReg, `<img style="max-width: 100%;display:block;"`);