微信小程序多个空格占位的尝试性方法集合

最新推荐文章于 2023-10-02 15:22:49 发布

hyis Yoo

最新推荐文章于 2023-10-02 15:22:49 发布

阅读量7.8k

点赞数 7

文章标签：微信小程序空格占位

本文链接：https://blog.csdn.net/qq_41024904/article/details/84280507

版权

最近在写微信小程序时需要实现多个空格占位，emm自己试验了一些加上网上查到的加decode方法，在这里记录一下。

代码如下：

<!-- 无论多少个空格都会被替换为一个空格 -->
<view class='c1'><text>我是c1我有4个空格啊    啊</text></view>

<!-- 事实证明添加绑定的空格数据是无效的 -->
<view class='c2'><text>我是c2我有4个空格啊{{"       "}}啊</text></view>

<!-- 如果不加decode="true" &nbsp会被识别突显 但是无法转化成空格 -->
<view class='c3'><text>我是c3我有4个空格啊&nbsp;&nbsp;&nbsp;&nbsp;啊</text></view>

<!-- 这个是正确的操作，也是网上查到的操作，缺点是要添加多少个空格就要加多少&nbsp; -->
<view class='c4'><text decode='true'>我是c4我有4个空格啊&nbsp;&nbsp;&nbsp;&nbsp;啊</text></view>

<!-- 这个是最开始我使用的操作，它好在可以自定义长度而不用使用多个&nbsp; 但是需要注意，这里只能使用text组件，其他的组件没有效果 -->
<view class='c5'><text >我是c5我有4个空格啊<text  style='display:inline-block;width:150px'></text>啊</text></view>

<!-- 在这里我使用了textarea  也是无效的 -->
<view class='c6'><text >我是c6我有4个空格啊<textarea  style='display:inline-block;width:100px'></textarea>啊</text></view>

效果如下：
在这里插入图片描述