This page is translated by Google Cloud Translation API

Switch to Chinese

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   < > & '    .
• 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>