react-ellipsis-pjs v2.1.2

React Ellipsis PJS

React Ellipsis PJS is a React component that lets Cross-browser multiline text ellipsis.

Installation

react-ellipsis-pjs@2 requires React v16.8.0 or higher with React Hooks support.

npm i --save-dev react-ellipsis-pjs

The react-ellipsis-pjs@1 using React Class supports React v16.0.0 or higher.

npm i --save-dev react-ellipsis-pjs@1.0.0

The V1 documentation can be found in the README_v1

Basic Usage

import React from 'react';
import Ellipsis from 'react-ellipsis-pjs';

const text = `React makes it painless to create interactive UIs
Design simple views for each state in your application,
and React will efficiently update and render just the right`;

<Ellipsis text={text} /> 

// Render: React makes it painless to create interactive UIs...

Custom Suffix And Lines

<Ellipsis text={text} lines={2} suffix=" - For detail..." /> 

// Render: 
// React makes it painless to create interactive UIs
// Design simple views for each state in your application, - For detail...

Custom Text Ellipsis Or Not

import { Tooltip } from 'antd';

<Ellipsis
  text={text}
  render={(ellipsisText, isEllipsis) => {
    if (!isEllipsis) return ellipsisText;
    return (
      <Tooltip title={text}>{ellipsisText}</Tooltip>
    );
  }}
/>

Props