微信小程序-cover-view组件内实现字体换行

1.实现目标：

在cover-view组件内实现如上效果

2.设计：

使得上层的字体可以覆盖下层的字体（使用z-index配置层级），达到目标效果

（ps.上图只是设想效果，实际上是可以完全覆盖住的）

3.代码实现：

wxml：

<live-player style='position:absolute;width:100%;height:800rpx;'>
  <cover-view style="position:absolute;bottom:40rpx;left:60rpx;background:#000;width:90%;height:200rpx;">
    <cover-view class='name_and_content'>{{name}}：{{content}}</cover-view>
    <cover-view class='name'>{{name}}：</cover-view>
  </cover-view>
</live-player>

js：

Page({
  data: {
    name: "河马Shawn",
    content: "富强民主文明和谐自由平等公正法治爱国敬业诚信友善。"
  },
})

wxss：

.name{
  position: absolute;
  display: inline;
  color: yellow;
  z-index: 1;
}
.name_and_content{
  color: white;
  white-space: normal;
  position: absolute;
  left: 0;
  top : 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

4.实现效果图：

以上就是利用cover-view组件重叠的方式实现目标效果。