https://github.com/tsung-ju/react-truncate-lines

React component for text truncation.
https://github.com/tsung-ju/react-truncate-lines

Last synced: 11 days ago
JSON representation

React component for text truncation.

• Host: GitHub
• URL: https://github.com/tsung-ju/react-truncate-lines
• Owner: tsung-ju
• License: mit
• Created: 2021-06-22T06:55:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-21T23:26:55.000Z (over 2 years ago)
• Last Synced: 2024-08-09T03:06:38.372Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.13 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-truncate-lines

React component for text truncation. Number of lines is measured using [Element.getClientRects()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects).

[Try it out](https://tsung-ju.github.io/react-truncate-lines/demo) 

## Install

```sh

npm install react-truncate-lines

```

## Usage

API is similar to [react-truncate](https://www.npmjs.com/package/react-truncate).

```js

import { TruncateLines } from "react-truncate-lines";

function MyComponent() {

  return (

    ...Read More}>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate

      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat

      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id

      est laborum.

    

  );

}

```

For multiline text use ``.