---
name: Text
title: 文本
category: 基础内容
owner: 张静媛
---

## 示例

```atom 基础示例
<template>
    <view class="wrap">
        <view class="title">不可以选中</view>
        <view class="text-container">
            <text>我是一段文本，不可被选中</text>
        </view>
        <view class="title">可以选中（存在兼容性问题，看注意事项）</view>
        <view class="text-container">
            <text :selectable="true" space="nbsp">我是一段文本，可以选中</text>
        </view>
        <view class="title">space ensp 中文字符空格一半大小</view>
        <view class="text-container">
            <text space="ensp">我有三个空格   ensp</text>
        </view>
        <view class="title">space emsp 中文字符空格大小</view>
        <view class="text-container">
            <text space="emsp">我有三个空格   emsp</text>
        </view>
        <view class="title">space nbsp 根据字体设置的空格大小</view>
        <view class="text-container">
            <text space="nbsp">我有三个空格   nbsp</text>
        </view>
        <view class="title">text嵌套text space 不处理</view>
        <view class="text-container">
            <text space="ensp"><text>我有三个空格   ensp</text></text>
        </view>
    </view>

</template>

<script type="config">
    {
        components: {
            text: 'components/Text/Text',
            view: 'components/View/View'
        }
    }
</script>

<style scoped>
.wrap {
    font-size: .16rem;
    padding: .1rem 0;
    background: #fff;
}

.title {
    font-size: .16rem;
    color: #999;
    padding: 0 0 0 .2rem !important;
}

.text-container {
    padding: .2rem !important;
}
</style>
```

## 注意事项
selectable 对应属性 user-select，该属性有兼容性问题，不同浏览器表现形式不同。

#### 各机型下 表现是否符合预期
  机型 | 手百 | 简单 | chrome | safari | UC
--- | --- | --- | --- | --- | ----
IOS | NO | YES | YES | YES | NO |
安卓 | NO | NO | YES | NO | NO |

## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
selectable | Boolean | false | 可选 | 文本是否可选 | -
space | String, Boolean | false | 可选 | 显示连续空格 [ensp, emsp, nbsp]| -

### Slots



名称 | 描述
--- | ---
default | 文本子节点

### Events
无