React component for shortening single-line text. The maximum width of the text is limited by the width of the container. The text that does not fit is reduced to an ellipsis (...), but the last N characters should always be output.
Source code at https://github.com/rumyantsevamary/react-text-overflow-ellipsis-with-tail
npm install --save react-text-overflow-ellipsis-with-tail
import React from 'react';
import { TextOverflowElipsisWithTail } from 'react-text-overflow-ellipsis-with-tail';
function Demo(){
return(
<React.Fragment>
<div>
<TextOverflowElipsisWithTail tailLength={4} className='myClassname' title='My custom title'>
'Some very very very very very looooong text'
</TextOverflowElipsisWithTail>
</div>
</React.Fragment>
)
}
export default Demo;
Name | Description | Type | isRequred | Default |
---|---|---|---|---|
tailLength | Number of characters visible | number | true | 0 |
in the end of passed string | ||||
title | Tooltip text that is shown when | string | false | - |
mouse moves over the element | ||||
className | Additional className | string | false | - |