# rax-text

> Text component for Rax.

Latest version **2.2.0** (published 2021-08-20) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install rax-text
pnpm add rax-text
yarn add rax-text
bun add rax-text
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2021-08-20 |
| First published | 2017-03-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 68.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 90 |
| Maintainers | zeroling, yuanyan, fyangstudio, solojiang, recover758126, marc.hy, rax-publisher |
| Keywords | Rax, rax-component, react-component |

## Links

- npm: https://www.npmjs.com/package/rax-text
- Repository: https://github.com/raxjs/rax-components
- Homepage: https://github.com/raxjs/rax-components#readme
- Issues: https://github.com/raxjs/rax-components/issues
- npm.io page: https://npm.io/package/rax-text

## Dependencies (1)

- [universal-env](https://npm.io/package/universal-env.md) ^3.0.0

## Recent versions

- 2.2.0 (latest) — 2021-08-20
- 2.1.0-0 (beta) — 2021-06-01
- 2.1.3 — 2021-08-18
- 2.1.2 — 2021-07-06
- 2.1.1 — 2021-06-28
- 2.1.0 — 2021-06-24
- 2.0.7 — 2021-02-24
- 2.0.6 — 2021-02-18
- 2.0.5 — 2021-01-28
- 2.0.5-0 — 2021-01-13
- 2.0.4 — 2020-10-12
- 2.0.3 — 2020-09-14
- 2.0.1 — 2020-09-02
- 2.0.0-0 — 2020-09-02
- 2.0.0 — 2020-09-01
- … 88 more at https://npm.io/package/rax-text/versions

## README

# rax-text

[![npm](https://img.shields.io/npm/v/rax-text.svg)](https://www.npmjs.com/package/rax-text)

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

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

```bash
$ npm install rax-text --save
```

## 属性

| **属性**    | **类型**   | **默认值** | **必填** | **描述**           | **支持** |
| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |
| numberOfLines     | `number` | 1         |   false           | 行数 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px" /> |
| selectable     | `boolean` | false         |   false           | 是否可选 | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />   |
| space     | `string` |         |         false     | 以何种方式显示连续空格 | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />  |
| decode     | `boolean` |         |   false           | 是否解码。为 true 时表示对文本内容进行解码，可解析的 HTML 实体字符有：&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />  |
## 示例

```js
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});
```

---
_Source: https://npm.io/package/rax-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._