A component for ReactJS. Used for omitting the middle fragment in the single-line text. It is also adaptive when dragging the window screen.

In the space where the display width is limited, it can show the head and tail of a string of characters. Through this way, it will be easier to infer the meaning of the string.

The component is exactly what you need ！

NPM or YARN

npm install react-abbr 

or

yarn add react-abbr

import React from 'react'
import ReactAbbr from 'react-abbr'
import 'react-abbr/dist/reactAbbr.css'

<div style={{ width: '170px' }}>
  <ReactAbbr text={'hello, world! This is ReactAbbr Component.'} />
</div>

<!-- Result -->
hello, wo... omponent.