# text组件

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

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

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

# 属性说明

Property Name Type Default Value Description Platform Difference Description
selectable Boolean false Whether the text is selectable
user-select Boolean false Whether the text is optional WeChat MiniApp
space String Display continuous spaces DingTalk MiniApp not support
decode Boolean false Whether to decode Baidu and DingTalk MiniApp do not support

space value description

value description
ensp Chinese character space half size
emsp Space size of Chinese characters
nbsp Space size set according to font

# 子组件

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

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

# Tips

  • 支持 \n 方式换行。
  • Under app-nvue, only <text> can wrap text content. Unable to wrap text in <view> component.
  • decode can parse &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;.
  • Space standards are not consistent across operating systems.
  • 除了文本节点以外的其他节点都无法长按选中。
  • 如果使用 <span> 组件编译时会被转换为 <text>
  • nvue 样式 word-wrap 在 Android 平台暂不支持

# 示例

查看演示

The following sample code comes from hello uni-app project. It is recommended to use HBuilderX to create a new uni-app project and select the hello uni-app template to directly experience the complete example.

Template

Script

<!-- This example does not contain the complete css, please refer to the above to get the external link css, check it in the hello uni-app project -->
<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>