uni-app中u-parse使用解析后strong被换行解决办法

u-parse富文本解析组件在小程序开发中如果遇到富文本的解析通常会优先选择该组件,使用该组件可以轻松将html格式的富文本解析成符合小程序的格式。

本篇文章介绍在使用u-parse富文本解析组件中遇到,strong标签经过解析后却被强制换行问题。

众所周知在html标签中,如span、strong、i等特殊标签属于inline行内元素显示。

这也就是说在html标签中它们并不会存在单独换行显示,但在u-parse富文本解析组件中却换行展示。

所生产的效果如此也就和我们需要展示的效果产生了巨大的差异。效果如下图所示:


由上图可以看出,通过strong标签解析后如果没有经过优化其效果进行了换行操作。但显然我们实际效果中是需要优化后的样式。

如此,我们要怎么修改才能获取到优化后的样式呢。

打开插件中u-parse.css样式文件。找到如下代码,位置大概在20行左右

修改前

.wxParse view {
word-break: hyphenate;
}

修改后

.wxParse view {
word-break: hyphenate;
display: inline ;//新增
}
.wxParse .h1 ,
.wxParse .h2 ,
.wxParse .h3 ,
.wxParse .h4 ,
.wxParse .h5 ,
.wxParse .h6 ,
.wxParse .p {
display: block ;//新增
}

通过将view标签样式由block改为inline行内样式,如此如果没有特殊定义的view标签,则全局都是行内样式。但这种对于原本p,h标签这类需要设置为block样式的显然不合适,这时下面的代码则单独将这些修改block即可。


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