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 · Twitter @microlinkhq