介绍

text 是小程序文本显示基础组件，专门用来展示文字内容，类似 HTML 的 <span>，行内元素，不会自动换行。

特性

1. 只有 text 组件能识别文本空格、换行符 \n，view 直接写文字会丢失格式
2. 支持嵌套 text，但不能嵌套 view / button / image 等块级组件
3. 文字复制、文本选中、富文本简单展示都靠它
4. 行内布局，多个 text 并排不自动换行

基础语法

wxml 结构

<!-- 基础文字 -->
<text>普通文本内容</text>

<!-- 换行、空格 -->
<text>第一行\n第二行  两个空格</text>

wxss 样式（text专属样式）

text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
}

属性详解

1. selectable 可复制文字

<!-- 长按文字可复制选中 -->
<text selectable>长按我复制这段文字</text>

2. space 空格控制

• space="ensp"：中文字符一半宽度空格
• space="emsp"：中文字符一倍宽度空格
• space="nbsp"：不间断空格（普通空格）

  <text space="emsp">前 后</text>
  

3. decode 转义特殊符号

关闭时 < 原样输出；开启会转成 <

<!-- 会显示 < > & " -->
<text decode>&lt;html&gt; &amp; &quot;</text>

常用实用案例

案例1：文字换行（\n）

view 内直接写换行无效，必须用 text

<text>苹果\n香蕉\n橙子</text>

输出：

苹果
香蕉
橙子

案例2：多行文本自动换行（搭配view宽度限制）

text 行内元素，父容器限制宽度自动换行

<view style="width:200rpx">
  <text>一段很长很长的测试文字，超出宽度会自动换行展示全部内容</text>
</view>

案例3：文字高亮、局部变色（嵌套text）

text 允许嵌套 text，单独设置样式

<text>今天天气：
  <text style="color:red;font-weight:bold">晴天</text>
</text>

案例4：禁止文字选中（默认效果）

不写 selectable 就无法长按复制

<text>这段文字不能复制</text>

常见坑 & 注意事项

1. text 不能嵌套块组件

错误：

<text><view>错误写法</view></text>

只能嵌套 text。

2. view 中纯文本丢失空格/换行

❌ 无效：<view>1 2\n3</view>
✅ 正确：<text>1 2\n3</text>

3. 样式限制

text 不支持 display:block 以外复杂布局，块状文字建议外层套 view。

4. 长文本性能

超大段文字建议拆分，或使用 rich-text 富文本组件。

5. 标签转义问题

展示 < > & 等符号必须开启 decode="true"，否则原样输出转义字符。

原文出处：/show_1GW3X750098X.html