微信小程序富文本内容样式修改
一、使用js操作
1、方式,在获取api返的数据时操作
// 获取文章
getArtic(){
wx.request({
url: `${app.data.getUrl}/api/News/GetFormJson`,
method:"GET",
data:{
Id: this.data.query.Id
},
success: ({data:res})=>{
// 添加样式
var _content = (res.Data.NewsContent).replaceAll('<img','<img style="float: left;width:100%";display: inline-block;height: auto;')
if(_content.indexOf('<p><img')){
_content=_content.replaceAll('<p id="feb-content" style="margin-left:2em"><img','<p id="feb-content" style="font-size:0;"><img')
}
res.Data.NewsContent= _content
// 设置返回数据
this.setData({
articleContent: res.Data
})
}
})
},
css样式操作
text
为Class类名,添加相关属性样式
.text [alt] {
width: 100%;
margin-left: -2em;
}
.text [style] {
display: table;
text-align: justify;
word-break: break-word;
word-break: break-all;
width: 100%;
padding-top: 1em;
text-indent: 2em;
font-size: 0;
line-height: 36rpx;
}