解决微信小程序towxml代码不换行问题

towxml是小程序富文本渲染库中比较热门的一款渲染库,渲染后大家有没有发现一个问题,那就是如果我们是一个代码展示性的文章。最后渲染的结果会发现所有的代码被强制显示在了一行,而这与我们想要完全展示在页面代码有着很大的区别。

原效果:


期望效果:


从上图可以看出,显然期望效果更适合我们阅读。

那么我们在小程序中要如何实现呢?其实很简单只需要去修改towxml的main.wxss就好了。

修改如图:


代码:

.h2w__pre .h2w__code {
white-space: pre-wrap;
width:100%;
display: block;
font-size: 80%;
}

主要修改的就是宽度和white-space属性!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!