Responsive text clamping component. Inspired by react-clamp-lines, but smaller (~1KB).
npm install nanoclamp --save
import NanoClamp from 'nanoclamp'; <NanoClamp className="custom-class" is="p" lines={2} text={'Some text to clamp.'} />
| prop | type | default | description |
|---|---|---|---|
| accessibility | boolean |
true |
Pass the full unclamped string to the DOM element's title attribute |
| className | string |
CSS classname(s) added to the string | |
| debounce | number |
300 |
Time in milliseconds used for debounce |
| ellipsis | string |
'...' |
String displayed after the clamped text |
| is | string |
'div' |
DOM selector used to render the string |
| lines | number |
3 |
Number of visible lines |
| text | string |
Text you wish to clamp |
nanoclamp © Microlink, released under the MIT License.
Adapted from react-clamp-lines by Brad Adams with help from contributors.
microlink.io · GitHub microlinkhq · X @microlinkhq