text

组件类型：UniTextElement

文本

text 兼容性

Android	iOS	web
3.9	4.11	4.0

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。文本样式的控制也应该在text组件上写style，而不是在view的样式里写。

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

属性

名称	类型	默认值	描述
selectable	boolean	false	文本是否可选
space	string	-	显示连续空格
值名称 描述 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小
decode	boolean	false	是否解码 (Android 端如需解析字符实体，需要配置为 true)

space 兼容性

	Android	iOS	web
ensp	3.9	4.11	4.0
emsp	3.9	4.11	4.0
nbsp	3.9	4.11	4.0

text 属性兼容性

	Android	iOS	web
selectable	3.9	4.11	4.0
space	3.9	4.11	4.0
decode	3.9	4.11	4.0

• App-Android平台文本换行规则（表现在文本断行位置等）可能和浏览器有差异。

子组件

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

app-uvue中的 text 组件虽然支持嵌套，但子组件不继承父组件样式。这样使用会在编译到各平台时可能产生差异，所以尽量避免使用text嵌套。

app 平台子组件设置的排版相关样式（如position、display、width、height、margin、padding等）以及部分text独有样式（如text-align、lines、white-space、text-overflow）不生效，

子组件

• text

示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="text-box" scroll-y="true">
        <text class="text">{{ text }}</text>
      </view>
      <view class="uni-btn-v">
        <button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">
          add line
        </button>
        <button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">
          remove line
        </button>
        <button class="uni-btn" type="primary" @click="textProps">
          更多属性示例
        </button>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<style>
  .text-box {
    margin-bottom: 20px;
    padding: 20px 0;
    display: flex;
    min-height: 150px;
    background-color: #ffffff;
    justify-content: center;
    align-items: center;
  }

  .text {
    font-size: 15px;
    color: #353535;
    line-height: 27px;
    text-align: center;
  }
</style>

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档
• 相关 Bug

Bug & Tips

• app平台不支持HTML字符实体。
• app平台 selectable开启后，仅支持全部文字复制，不支持自由调整光标选择文字。如需自由选择文字，请使用rich-text组件。web平台默认就是可复制文字的，selectable无效。