react-line-clamp v1.2.6

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 <div className="container">
               <div className="grid" id="demo">
                   <div className="column">
                       <Clamp className="card" innerClassName="inner-card" ellipsis="..." ref="aCard" autoAdjustInterval={0} style={{height: '150px'}} innerStyle={{color: "#366"}}>
                       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.
                       </Clamp>
                   </div>
                   <div className="column">
                       <Clamp className="card" innerClassName="inner-card" ellipsis="<span>&nbsp;<a href="#">Read More</a></span>" 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.
                       </Clamp>
                   </div>
               </div>
           </div>
       }
   
       ...
   }

   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