uni-halo/.agents/bak-skills/uniappx-project/examples/components/built-in/text.md

text 组件示例

官方文档

参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/text.html

概述

text 是文本组件，用于显示文本内容。

基础用法

<template>
  <text>这是一段文本</text>
</template>

完整示例

示例 1: 基本文本

<template>
  <view class="container">
    <text>普通文本</text>
    <text class="bold-text">加粗文本</text>
    <text class="colored-text">彩色文本</text>
  </view>
</template>

<style>
.bold-text {
  font-weight: bold;
}
.colored-text {
  color: #007aff;
}
</style>

示例 2: 文本嵌套

<template>
  <view class="container">
    <text>
      这是一段
      <text class="highlight">高亮</text>
      文本
    </text>
  </view>
</template>

<style>
.highlight {
  color: #ff3b30;
  font-weight: bold;
}
</style>

示例 3: 文本选择

<template>
  <view class="container">
    <text selectable>这段文本可以选择</text>
    <text :selectable="false">这段文本不可选择</text>
  </view>
</template>

示例 4: 文本换行

<template>
  <view class="container">
    <text class="text-wrap">
      这是一段很长的文本，会自动换行显示。这是一段很长的文本，会自动换行显示。
    </text>
  </view>
</template>

<style>
.text-wrap {
  width: 300px;
  word-wrap: break-word;
}
</style>

示例 5: 文本样式

<template>
  <view class="container">
    <text class="text-style">样式文本</text>
    <text class="text-decoration">装饰文本</text>
    <text class="text-shadow">阴影文本</text>
  </view>
</template>

<style>
.text-style {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.text-decoration {
  text-decoration: underline;
  color: #007aff;
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>

属性说明

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
user-select	Boolean	false	文本是否可选（H5）
space	String	-	显示连续空格

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. text 组件内只能嵌套 text 组件
2. selectable 属性用于控制文本是否可选择
3. 文本样式通过 CSS 控制
4. 建议使用 text 组件而不是直接在 view 中写文本

参考资源

• 官方文档: https://doc.dcloud.net.cn/uni-app-x/component/text.html