A react component which can help you implememt line-clamp automatically
npm install react-line-clampA React Component which can help you clamp Multi-line text.
* Install with npm: npm install react-line-clamp
* Clone the repo: https://github.com/oglen/react-clamp
1. require react-clamp to your react component:
import Clamp from 'react-line-clamp';
2. Use react-clamp in your component:
class Component extends React.Component {
componentDidMount() {
window && window.addEventListener('resize', event => {
this.refs.aCard.adjustContext();
});
}
render() {
return
...
}
In default, the option is {autoAdjustInterval: 200}, it will ensure adjusting is automatic.
3. And set the card style:
.card {
height: 60px;
overflow: hidden;
line-height: 20px;
}
There is a clear and concise example in the repo, preview it in following steps:
Enter the project fold and execute:
npm install
gulp
And visit link:
/demo/index.html