这里以微信小程序text标签为例
1、产生空格代码(这里的:为英文字符)
<view class='time-text'>
距结束
<text>{{data.countDownDay}}</text>天
<text>{{data.countDownHour}}</text>:
<text>{{data.countDownMinute}}</text>:
<text>{{data.countDownMinute}}</text>
</view>
2、代码造成的效果图
3、原因:enter换行符被解析为占位符了(正常现象)
4、解决方法
(1) 代码写法改为,连接写法
<view class='time-text'>
距结束<text>{{data.countDownDay}}</text>天<text>{{data.countDownHour}}</text>:<text>{{data.countDownMinute}}</text>:<text>{{data.countDownMinute}}</text>
</view>
(2) 父容器 设置font-size: 0rpx;
.time-text{
font-size: 0rpx;
}
代码层次的距结束&& :号应该放在text中,设置text字体大小
(3) 内部样式改为display:block;float:left,代码结构也需要更改
(4) flex 样式写法