Text

描述

• Text 用于显示文本，在 Web 容器中是使用 span 标签实现的，而不是 p 标签。

安装

$ npm install rax-text --save

属性

属性	类型	默认值	必填	描述	支持
numberOfLines	Number	1	✘	行数

注：基础属性、事件及图片含义见组件概述。

示例

基本用法

import Text from 'rax-text';

function App() {
  return (
    <Text>Text</Text>
  );
}

文本溢出

import View from 'rax-view';
import Text from 'rax-text';

function App() {
  return (
    <View>
      <Text
        numberOfLines={1}
        style={{
          width: 300,
          textOverflow: 'ellipsis',
        }}
      >
        单行文本超出被截断的文本
      </Text>

      <Text
        numberOfLines={2}
        style={{
          width: 300,
          textOverflow: 'ellipsis',
        }}
      >
        多行文本超出被截断的文本，超出被截断的文本，超出被截断的文本，超出被截断的文本
      </Text>
    </View>
  );
}

文本划线

import View from 'rax-view';
import Text from 'rax-text';

function App() {
  return (
    <View>
      <Text style={{ textDecoration: 'underline' }}>文本下划线</Text>

      <Text style={{ textDecorationLine: 'none' }}>无下划线</Text>

      <Text style={{ textDecoration: 'line-through' }}>文本删除线</Text>
    </View>
  );
}

文本设置行高

import View from 'rax-view';
import Text from 'rax-text';

function App() {
  return (
    <View>
      <Text style={{ lineHeight: '120rem' }}>
        行高 120 rem，多行文本文本折行效果 多行文本文本折行效果
      </Text>
    </View>
  );
}