text | uni-app-x

# text

组件类型：UniTextElement

文本

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

在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

是否解码 (app平台如需解析字符实体，需要配置为 true)

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">
        <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>

注意

App 端不支持 text 组件中渲染多段文本，如果 text 组件中的文本是动态的，可以将计算后的结果通过数据给到 text 组件, 而不是在模板中通过 template 拼接多段文本, 以免出现渲染异常，例如：

<template>
  <view>
    <text>
      <template v-for="item in list">
        <template v-if="item['show']">{{item['text']}}</template>
      </template>
    </text>
  </view>
</template>

<script setup lang="uts">
  const list = ref([
    {
      show: true,
      text: 'a'
    },{
      show: false,
      text: 'b'
    },{
      show: true,
      text: 'c'
    }
  ])
  
</script>

上述代码应调整为：

<template>
  <view>
    <text>{{textValue}}</text>
  </view>
</template>

<script setup lang="uts">
  const list = ref([
    {
      show: true,
      text: 'a'
    }, {
      show: false,
      text: 'b'
    }, {
      show: true,
      text: 'c'
    }
  ])
  const textValue = computed((): string => {
    let res = ''
    list.value.forEach(item => {
      if (item['show'] === true) {
        res += item['text']
      }
    })
    return res
  })
</script>

# 参见

# Bug & Tips

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