我是靠谱客的博主 生动鞋垫,最近开发中收集的这篇文章主要介绍电脑端编辑富文本在手机端展示样式有问题,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

<div v-if="detail" v-html="detail" class="html-box"/>

第一种方法:利用正则表达式,对DOM元素替换

 if (this.detail) {
    this.detail = this.detail.replace(/<img/gi, '<img style="width: 100%;height:auto;"')
    this.detail = this.detail.replace(/<p/gi, '<p style="line-height: 150%;"')
 }

第二种方法,也是推荐的方法:

<style lang="less">
  .html-box{
    /deep/ p{
      line-height: 150%;
    }
    /deep/ img{
      width: 100%;
      height:auto;
    }
  }
</style>

最后

以上就是生动鞋垫为你收集整理的电脑端编辑富文本在手机端展示样式有问题的全部内容,希望文章能够帮你解决电脑端编辑富文本在手机端展示样式有问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部