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

1.实现目标:

微信小程序-cover-view组件内实现字体换行_第1张图片

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

2.设计:

微信小程序-cover-view组件内实现字体换行_第2张图片

微信小程序-cover-view组件内实现字体换行_第3张图片

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

(ps.上图只是设想效果,实际上是可以完全覆盖住的)

3.代码实现:

wxml:


  
    {{name}}:{{content}}
    {{name}}:
  

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组件内实现字体换行_第4张图片

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

 

你可能感兴趣的:(微信小程序)