Skip to content

fang-lin/react-clamp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published