美文网首页
小程序富文本HTML标签添加样式

小程序富文本HTML标签添加样式

作者: holidayPenguin | 来源:发表于2020-04-02 18:07 被阅读0次

当我们在html页面中引入富文本时可以很方便的修改其样式,但是在小程序中如何修改呢

就是直接替换样式,或者修改添加class。

这里的class指的是在当前小程序页面中的样式。

 const temp = nodes
      .replace(/style="max-width:100%;"/g, '')
      .replace(/<img/gi, '<img style="width:100%;height:auto;display:block;" ')
      .replace(/\<p/gi, '<p class="p-goods-detail-panel-body-line" ')
      .replace(/\<h(\d)/gi, '<h$1 class="p-goods-detail-panel-body-line" ')
      .replace(/\<table/gi, '<table class="p-goods-detail-panel-body-line" ')
      .replace(/\<pre/gi, '<pre class="p-goods-detail-panel-body-line" ')

return `<div class="p-goods-detail-panel-body">${temp}</div>`
.p-goods-detail-panel-body{
  line-height: 1.5!important;
}
.p-goods-detail-panel-body-line{
  margin: 10px 0;
}

相关文章

  • 小程序富文本HTML标签添加样式

    当我们在html页面中引入富文本时可以很方便的修改其样式,但是在小程序中如何修改呢 就是直接替换样式,或者修改添加...

  • HTML学习

    html中的标签是用来给文本添加语义的,不是用来修改文本样式的 h标签 - 标题 一共6级标题,独占一行 p标签 ...

  • 小程序组件简明说明

    小程序组件基础了解 不支持标签定义样式,只允许内联样式和class样式 不支持ul li 等html标签 小程序中...

  • iOS 富文本NSAttributedString

    NSAttributedString样式Demo 加载HTML标签文本

  • 微信小程序之HTML富文本解析

    在最近微信小程序开发过程中,遇到一些文章内容是HTML富文本的,但是偏偏微信小程序本身是支持HTML标签的,所以我...

  • vue 给富文本标签添加样式

    给vue项目中v-html的内容添加样式 1.使用css 深度选择器 .content >>> img { max...

  • 微信小程序 rich-text 解析富文本以及图片处理

    最近在写微信小程序的时候,后台返回的是富文本数据,开始想着处理html标签,后来发现可以使用rich-text标签...

  • Java之HTML富文本导出WORD(不含图片)

    一、需求: 我们在使用富文本编辑器来编辑文本的时候,文本会自带HTML的标签比如 等来修饰字体样式。 比如ue...

  • 初识HTML-01

    Html文档相当于网页,包含html标签和文本内容。大致样式如下: 声明,不是 HTML 标签...

  • 02HTML基础-常用标签

    H系列标签 格式 xxxxx 作用 给文本添加标题语义 注意事项 H标签只给文本添加标题语义,不是用来修改文本样式...

网友评论

      本文标题:小程序富文本HTML标签添加样式

      本文链接:https://www.haomeiwen.com/subject/nbqfphtx.html