uni-app text组件的基本使用

text

文本组件。

用于包裹文本内容。

属性说明

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

space 值说明

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

要有一个根组件<view>先，还要换行就<view>包裹

一般默认只会解析一个空格，要想显示所有的空格都解析出来并且控制它这个空格显示方式就可以通过这个space来实现

<template>
    <div>
        <h2>这是页面信息</h2>
        <view>
            <view>
                <!-- 长按文本是否可选 -->
                <text selectable="true">你好{{name}}</text>
            </view>
            <view>
                <!-- 期望把所有的空格都显示出来并且控制它这个空格显示方式就可以通过这个space来实现-->
                <!-- ensp显示中文字符俩个空格大小 -->
                <text selectable space="ensp">你好    {{name}}</text>
            </view>
            <view>
                <!-- 期望把所有的空格都显示出来并且控制它这个空格显示方式就可以通过这个space来实现-->
                <!-- ensp显示中文字符一个空格的大小 -->
                <text selectable space="emsp">你好    {{name}}</text>
            </view>
            <view>
                <!-- 期望把所有的空格都显示出来并且控制它这个空格显示方式就可以通过这个space来实现-->
                <!-- nbsp根据字体设置的空格大小 -->
                <text selectable space="nbsp" style="font-size: 30px;">你好    {{name}}</text>
            </view>
        </view>
    </div>
</template>

• decode 可以解析的有   < > & '   `` ` 。

<view>
                <text selectable>&amp;</text>
            </view>

以前在微信小程序中是不能默认解码的，现在可以默认解码

rich-text

• text
  • 文本组件
  • 类似于HTML中的span标签,是一个行内元素
• rich-text
  • 富文本组件
  • 支持把HTML字符串渲染为WXML结构