小程序: 文本(text)

代码Github地址

text 里面不能有换行,如果有换行的话,那么 在小程序的显示界面上也是换行,这个要注意

一. 属性说明

1. space 设置space的不同值，可以让文本中的空格显示不同的间距。 这三个也叫不换号空格。 意思是前后字符和这个空格符号作为一个整体。不会中间换行。

• ensp-> 中文字符空格一半大小。

• emsp-> 中文字符空格大小.

• nbsp-> 根据字体设置的空格大小

3. text  支持  \n 换行

4. 应用 首段缩进两个字的间距

// 一定要开启是否解码(decode).  文本前面加上 `  `
<text decode="{{true}}">&emsp;&emsp;首行空两格\n第二行</text>

注意：space是针对文本中的空格符号。decode是针对文本中存在的字符实体。

二. 代码

• wxml

<view class="container">
  <text class="text" selectable="{{false}}" space="ensp">中文 字符空格一半大小</text>
  <text class="text" space="emsp">中文 字符空格大小</text>
  <text class="text" space="nbsp">根据 字体设置的空格大小</text>
</view>

<text decode="{{true}}">&emsp;&emsp;首行空两格\n第二行</text>

• wxss

.container {
  display: flex;
  flex-direction: column;
}

.text {
  font-size: 50rpx;
}