微信小程序换行空格&连续空格 view不自动换行

最新推荐文章于 2024-02-07 10:13:15 发布

原创最新推荐文章于 2024-02-07 10:13:15 发布 · 1.7w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#小程序换行 #小程序连续空格 #小程序不自动换行

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在WXML中如何处理文本换行与空格的方法，包括使用特定标签和属性实现多行文本自动换行及不同空格效果的技术细节。

一、换行
1、必须在<text/>里, 才能用 \n 来换行；
2、<view>里的不能用 \n 换行，想在view里换行，只能再包含一个text
换行例子：

<view class='outer_box'>
      <text class='inner-box'>
         1、第一行文字 \n
         2、第二行文字
      </text>
</view>

二、空格&连续空格
1、单个空格
必须在<text/>里 \t 来显示空格；

<text decode='nbsp'>
      我 \t 爱 \t 北京 \t 天安门
</text>

2、多个空格
无论多少个 \t 只能显示一个空格，想显示连续多个空格，用如下方法：
2.1、方法一用decode=’true’ 配合

<text decode='true'>
      我 &nbsp; 爱 &nbsp;&nbsp; 北京 &nbsp;&nbsp;&nbsp;&nbsp; 天安门
</text>

2.2、方法二用space=’nbsp’, 这个比较方便，有多少个空格就显示多少空格

<text space='nbsp'>
      我 爱  北京      天安门
</text>

三、多行自动换行

view出现不自动换行，可能原因如下：
1、view 的 display属性由默认的 display:block; 改为其他的比如 display:flex; 这种情况下改回 display:block即可实现自动换行
2、view的最大高度/高度被设置成固定值；这种情况取消高度限制即可实现自动换行