react-clamp

A React Component which can help you clamp Multi-line text.

Getting Started

* Install with npm: npm install react-line-clamp
* Clone the repo: https://github.com/oglen/react-clamp

Usage

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

Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.

Read More" ref="bCard">
Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.

}

...
}
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;
}

Run Demo

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