rax-text

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

Text 用于显示文本，在 web 中实际上是一个 span 标签而非 p 标签。

安装

$ npm install rax-text --save

属性

属性	类型	默认值	必填	描述
numberOfLines	`number`	1	false	行数
selectable	`boolean`	false	false	是否可选
space	`string`		false	以何种方式显示连续空格
decode	`boolean`		false	是否解码。为 true 时表示对文本内容进行解码，可解析的 HTML 实体字符有： < > & '

示例

import {createElement, render, Component} from 'rax';
import DU from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';

const styles = {
  root: {
    width: 750,
    paddingTop: 20,
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  textBlock: {
    fontWeight: '500',
    color: 'blue',
  },
  logBox: {
    padding: 20,
    margin: 10,
    borderWidth: 1,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
};

class App extends Component {
  render() {
    return (
      <View style={styles.root}>
        <View style={{
          ...styles.container, ...{
            flexDirection: 'row',
            justifyContent: 'flex-start',
          }
        }}>
          <Text>text</Text>
          <Text style={{
            color: '#ff4200'
          }}>Mixing</Text>
        </View>

        <View style={styles.container}>
          <Text numberOfLines={1} style={{
            width: 300,
            textOverflow: 'ellipsis',
          }}>Single line of text exceeds truncated text</Text>

          <Text numberOfLines={2} style={{
            width: 300,
            textOverflow: 'ellipsis',
          }}>
          Multi-line text exceeds truncated text, exceeds truncated text, exceeds truncated text, exceeds truncated text</Text>
        </View>

        <View style={styles.container}>
          <Text style={{textDecoration: 'underline'}}>
          Text underline
          </Text>
          <Text style={{textDecorationLine: 'none'}}>
           no Underlined
          </Text>
          <Text style={{textDecoration: 'line-through'}}>
          Text strikethrough
          </Text>
        </View>

        <View style={styles.container}>
          <Text style={{lineHeight: '120rpx'}}>
          Line height 120rpx, multi-line text text folding effect Multi-line text text folding effect
          </Text>
        </View>

      </View>
    );
  }
}

render(<App/>, document.body, {driver: DU});

Current Tags

2.1.0-0 ... beta (3 years ago)
2.2.0 ... latest (3 years ago)

103 Versions

2.2.0 ... 3 years ago
2.1.3 ... 3 years ago
2.1.2 ... 3 years ago
2.1.1 ... 3 years ago
2.1.0 ... 3 years ago
2.1.0-0 ... 3 years ago
2.0.7 ... 4 years ago
2.0.6 ... 4 years ago
2.0.5 ... 4 years ago
2.0.5-0 ... 4 years ago
2.0.4 ... 4 years ago
2.0.3 ... 4 years ago
2.0.1 ... 4 years ago
2.0.0-0 ... 4 years ago
2.0.0 ... 4 years ago
1.4.0 ... 4 years ago
1.3.1 ... 5 years ago
1.3.0 ... 5 years ago
1.2.0 ... 5 years ago
1.1.7-0 ... 5 years ago
1.1.6 ... 5 years ago
1.1.5 ... 5 years ago
1.1.4 ... 5 years ago
1.1.3 ... 5 years ago
1.1.3-0 ... 5 years ago
1.1.2 ... 5 years ago
1.1.2-1 ... 5 years ago
1.1.2-0 ... 5 years ago
1.1.1-beta.4 ... 5 years ago
1.1.1 ... 5 years ago
1.1.1-beta.3 ... 5 years ago
1.1.1-beta.2 ... 5 years ago
1.1.1-beta.1 ... 5 years ago
1.1.0-2 ... 5 years ago
1.1.0-1 ... 5 years ago
1.1.0-0 ... 5 years ago
1.0.2 ... 5 years ago
1.0.1 ... 5 years ago
1.0.1-beta.1 ... 5 years ago
1.0.1-beta.0 ... 5 years ago
1.0.0-miniapp.beta.5 ... 5 years ago
1.0.0-miniapp.beta.2 ... 5 years ago
1.0.0-miniapp.beta.1 ... 5 years ago
1.0.0-miniapp.beta.0 ... 6 years ago
1.0.0-beta.5 ... 6 years ago
1.0.0 ... 6 years ago
1.0.0-beta.4 ... 6 years ago
1.0.0-beta.3 ... 6 years ago
1.0.0-beta.1 ... 6 years ago
1.0.0-beta.0 ... 6 years ago
0.6.5 ... 6 years ago
0.6.4 ... 6 years ago
0.6.3 ... 7 years ago
0.6.2 ... 7 years ago
0.6.1 ... 7 years ago
0.6.0 ... 7 years ago
0.5.4 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.20 ... 7 years ago
0.4.19 ... 7 years ago
0.4.18 ... 7 years ago
0.4.17 ... 7 years ago
0.4.16 ... 7 years ago
0.4.15 ... 7 years ago
0.5.0-beta ... 7 years ago
0.4.14 ... 7 years ago
0.4.13 ... 7 years ago
0.4.12 ... 7 years ago
0.4.11 ... 7 years ago
0.4.10 ... 7 years ago
0.4.9 ... 7 years ago
0.4.8 ... 7 years ago
0.4.7 ... 7 years ago
0.4.6 ... 7 years ago
0.4.5 ... 7 years ago
0.4.4 ... 7 years ago
0.4.3 ... 7 years ago
0.4.2 ... 7 years ago
0.4.1 ... 7 years ago
0.4.0 ... 7 years ago
0.3.8 ... 7 years ago
0.3.7 ... 7 years ago
0.3.6 ... 7 years ago
0.3.5 ... 7 years ago
0.3.4 ... 7 years ago
0.3.3 ... 8 years ago
0.3.2 ... 8 years ago
0.3.1 ... 8 years ago
0.3.0 ... 8 years ago
0.2.11 ... 8 years ago
0.2.10 ... 8 years ago
0.2.9 ... 8 years ago
0.2.8 ... 8 years ago
0.2.7 ... 8 years ago
0.2.6 ... 8 years ago
0.2.5 ... 8 years ago
0.2.4 ... 8 years ago
0.2.3 ... 8 years ago
0.2.2 ... 8 years ago
0.2.1 ... 8 years ago
0.2.0 ... 8 years ago