在写微信小程序开发过程中,有时候为了画面美观,里面的文本内容需要给它开头空格,段落换行,但是常用的HTML的语法书写跟微信小程序又不一样,这个时候就需要运用微信小程序特写的如下技能。

书写前提条件注意: 必须在<text>标签中!

1.单个空格、换行、

\t     单个空格字符,无论写多少个都只会显示一个空格。
\n    换行字符

  • 代码示例如下:
 <text>你好!\t这是第一章的内容,下面的是第二章内容。\n我是第二章</text>
  • 显示效果如果下:


注意: 换行字符\t不可以放在文本内容句首,否则无效。

2.需要使用多个空格时,有以下方法

1)在文本<text>内添加space="ensp"space="emsp"space="nbsp"

  • 代码示例如下:
<view>
    <text space="ensp">这是 第一章 的内容</text>
</view>
<view>
    <text space="emsp">这是 第二章 的内容</text>
</view>
<view>
    <text space="nbsp">这是 第三章 的内容</text>
</view>
  • 显示效果如果下:

    注意:
    1)ensp显示出来的空格是中文字符一半大小
    2)emsp显示出来的空格是一个中文字符大小
    3)nbsp显示出来的空格是根据字体设置的大小

    2)在文本<text>内添加decode="{{true}}",文本内容用&ensp;&emsp;&nbsp;

    • 代码示例如下:
<view>
    <text decode="{{true}}">这是&ensp;第一章&ensp;&ensp;的内容</text>
</view>
<view>
    <text decode="{{true}}">这是&emsp;第二章&emsp;&emsp;的内容</text>
</view>
<view>
    <text decode="{{true}}">这是&nbsp;第三章&nbsp;&nbsp;的内容</text>
</view>
  • 代码实现显示效果如下:


注意:

1)&ensp;显示出来的空格是中文字符一半大小
2)&emsp;显示出来的空格是一个中文字符大小
3)&nbsp;显示出来的空格是根据字体设置的大小

更多推荐

如何在写微信小程序开发的时候给其文本内容部分添加空格或者换行呢?