uniapp的nvue中文字换行问题

在uniapp中使用播放器video这种原生组件，会导致层级问题。解决这个问题的办法就是使用nvue页面。但是这个页面的css样式很多都不支持。其中文字换行就是一个。
第一层
在一个text中，文字是可以换行，但是不能做到给不同的文字不同的样式。

第二层
如果仅仅是考虑文字的颜色问题：直接用rich-text，可以设置不同的颜色。但是无法解决背景颜色问题。而且不能解决宽度自适应的问题。如果给外层套一层view,设置背景颜色就是100%的宽度了。或者固定的宽度。

第三层
用text包裹单个字符，外层给出 flex-flow: row wrap的样式。这种方式可以给每个字符设置背景颜色，以及padding margin等属性。问题就是无法整体设置。但是可以用一些取巧的办法。比如第一个字符可以是任意一个字，颜色设置透明，最后一个字同样操作。中间的字符只要设置padding-top padding-bottom就行。这样就能伪装成一个块了。但是如果用v-for遍历字符，会丢失表情字符

第四层
用Array.from 将字符串转成字符数组。保留了表情字符。

最后的效果：