# text组件

文本组件。用于包裹文本内容。

在app-uvue和app-nvue中,文本只能写在text中,而不能写在view的text区域。

虽然app-uvue中写在view的text区域的文字,也会被编译器自动包裹一层text组件,看起来也可以使用。但这样会造成无法修改该text文字的样式,详见uvue的样式不继承章节

# 属性说明

属性名 类型 默认值 说明 平台差异说明
selectable Boolean false 文本是否可选
user-select Boolean false 文本是否可选 微信小程序
space String 显示连续空格 钉钉小程序不支持
decode Boolean false 是否解码 百度、钉钉小程序不支持

space 值说明

说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小

# 子组件

text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、app-vue)和uvue中,可以并只能嵌套text组件。

在nvue中,text组件不能嵌套。

# Tips

  • 支持 \n 方式换行。
  • 在app-nvue下,只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
  • decode 可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
  • 各个操作系统的空格标准并不一致。
  • 除了文本节点以外的其他节点都无法长按选中。
  • 如果使用 <span> 组件编译时会被转换为 <text>
  • nvue 样式 word-wrap 在 Android 平台暂不支持

# 示例

查看演示

以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。

Template

Script

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="text-box" scroll-y="true">
				<text>{{text}}</text>
			</view>
			<view class="uni-btn-v">
				<button type="primary" :disabled="!canAdd" @click="add">add line</button>
				<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
			</view>
		</view>
	</view>
</template>