react-text-overflow-middle-ellipsis

Installation

To install, you can use npm or yarn:

$ npm install react-text-overflow-middle-ellipsis
$ yarn add react-text-overflow-middle-ellipsis

Usage

Using like other react components.

Make sure component instance is wraped by element with default width (such as flex: 1), and component is the only child element.

Examples

import React, { Component } from 'react'
import EllipsisText from 'react-text-overflow-middle-ellipsis'

class TestComponent extends Component {

    render() {
        return (
            <div style={width: '100px'}>
                <EllipsisText text="Long Long Long Long Long Long Text" className={'centerText'}>
            </div>
        )
    }
}

Render Result

Original text:

Long Long Long Long Long Long Text

Render output:

Long L..Text

DEMO

DEMO1

TODO

1. Support emoji croping.
2. The only child element is non-essential.