https://blog.csdn.net/lph159/article/details/144194897
1 什么是 text 组件？
text 组件是微信小程序中最常用的组件之一，专门用于显示文本信息。开发者可以通过 text 组件灵活地展示不同的文字内容，同时配合样式属性调整文本的外观。该组件非常适用于显示任何需要文本展示的场景，如页面标题、描述、警告信息、正文内容等。
2 text 组件的基本用法
2.1 基本结构
text 组件的使用非常简单，主要通过 text 标签来定义文本内容。通过 text 组件，你可以在页面中直接显示一段文本内容。
<text>这是一段示例文本</text>
上述代码会在页面上显示出一行普通的文本。
2.2 支持的文本内容
text 组件支持普通的文本内容，可以显示汉字、英文、数字以及特殊字符等。由于它是一个纯文本组件，text 组件不会处理富文本格式，如果需要更复杂的文本布局（例如文本中包含链接、图片等），你可能需要使用其他组件如 rich-text 组件。
<text>欢迎使用微信小程序开发！</text>
2.3 单行文本
默认情况下，text 组件显示的文本是单行文本。如果文本内容超出了屏幕宽度，它将会溢出，显示不完整。
如果你希望文本在超出屏幕宽度时自动换行，可以通过 CSS 样式控制：
<text style="white-space: normal;">这是一段超长文本，超出屏幕宽度会自动换行。</text>
3 text 组件的常用属性
text 组件虽然是一个简单的文本组件，但它提供了多个可以定制的属性，使得开发者可以灵活地控制文本的样式、显示方式等。以下是常见的属性及其说明
3.1 selectable
selectable 属性控制文本是否可以被选中。如果设置为 true，用户可以通过长按文本来选择并复制它，默认值为 false。
<text selectable="true">这是可以被选择的文本。</text>
此属性非常适用于需要让用户复制文本内容的场景，如复制邀请码、文章引用等。
3.2 decode
decode 属性用于控制是否解码文本中的 HTML 实体字符。如果设置为 true，text 组件会自动解码文本中的 HTML 实体字符（如 <、> 等）。
<text decode="true"><div>这是一个HTML标签</div></text>
在上面的代码中，decode="true" 会把文本中的 < 和 > 解码为 < 和 >，从而显示为正常的 HTML 标签内容。
3.3 style
style 属性允许通过行内样式对 text 组件的文本进行样式设置。例如，设置文本颜色、字体大小、行高、字间距等。
<text style="color: red; font-size: 24px;">这是红色的文本，字体大小为24px。</text>
这种方式可以直接在 text 标签内通过 style 属性定义文本的样式。
3.4 space
space 属性控制文本之间的空格显示方式。常见的取值有：
normal：正常显示空格（默认值）。
pre：保留文本中的多个空格和换行。
nowrap：不允许文本换行，所有的文本会在一行内显示。
<text space="pre">这 是 保留多个空格的文本。</text>
4 text 组件的常见样式
4.1 设置字体大小、颜色和对齐方式
你可以使用 CSS 样式来设置 text 组件的字体、颜色、对齐等属性。例如，设置字体颜色为蓝色，字体大小为 18px，并且将文本居中对齐。
<text style="color: blue; font-size: 18px; text-align: center;">这是蓝色文本，字体大小18px，居中对齐。</text>
4.2 多行文本和换行
当文本内容比较多时，text 组件会自动换行，或者你也可以通过设置 white-space 来控制文本的换行行为。以下代码会使文本在溢出时自动换行：
<text style="white-space: normal;">这是一段很长的文本，当超过容器宽度时会自动换行。</text>
4.3 设置行高和字间距
line-height 和 letter-spacing 可以分别设置文本的行高和字间距。通过这些属性，你可以更好地控制文本的布局，提升可读性。
<text style="line-height: 30px; letter-spacing: 2px;">这段文本的行高为30px，字间距为2px。</text>
4.4 设置文本阴影
text-shadow 属性可以为文本设置阴影效果，让文本看起来更具立体感。例如：
<text style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);">这段文本有一个阴影效果。</text>
5 text 组件的应用场景
5.1 显示页面标题或重要信息
在小程序中，text 组件常常用来显示页面的标题或者重要的提示信息。例如，显示应用的名称或导航栏的标题。
<text style="font-size: 30px; font-weight: bold;">欢迎来到我的小程序</text>
5.2 显示段落正文
text 组件也常常用于显示段落正文。在展示内容时，可以通过设置不同的字体大小、颜色、行高等属性来优化阅读体验。
<text style="font-size: 16px; line-height: 24px;">这是第一段正文内容，文字大小为16px，行高为24px。</text>
<text style="font-size: 16px; line-height: 24px;">这是第二段正文内容，文字大小为16px，行高为24px。</text>
5.3 动态提示和警告信息
在一些交互中，可能需要向用户展示一些提示、警告或者错误信息。text 组件可以用于此类需求。
<text style="color: red; font-size: 18px;">请检查输入的邮箱地址是否正确。</text>
5.4 实现富文本效果
尽管 text 组件本身不支持富文本，但通过组合使用 text 组件和其他组件（如 rich-text），可以实现富文本展示功能。例如，在文章页面中显示带有格式的文本。
6 加空格
这里专门写一下加空格
<text decode="{{true}}"> 哈哈哈</text>
