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

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;"`);
  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值