Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//fb.me/react-0.14.3.js"></script>
  <script src="//fb.me/react-dom-0.14.3.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js" type="text/javascript"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style type="text/css">
    .dotdotdot {
      height: 50px;
    }
  </style>
</head>
<body>
  <div class='dotdotdot' data-ellipsis="☃">
Cincinnati paul brown stadium freedom center historic architecture rivertown central christian moerlein fifty west 1788 union terminal river front slavery cyclones midpoint music festival. 1788 fifty west humid john roebling otr. Washington park city reds cincinnati coffee emporium humid main street hyde park. Freedom center hyde park zinzinnati over-the-rhine museum center immigrants city walnut hills washington park flying pig oktoberfest isaac m. wise temple cyclones city beat union terminal reds.
  </div>
  <div class='dotdotdot'>
Cincinnati paul brown stadium freedom center historic architecture rivertown central christian moerlein fifty west 1788 union terminal river front slavery cyclones midpoint music festival. 1788 fifty west humid john roebling otr. Washington park city reds cincinnati coffee emporium humid main street hyde park. Freedom center hyde park zinzinnati over-the-rhine museum center immigrants city walnut hills washington park flying pig oktoberfest isaac m. wise temple cyclones city beat union terminal reds.
  </div>
</body>
</html>
 
const DotDotDot = React.createClass({
  componentDidMount: function() {
    const { text, className, ...options } = this.props;
    $(ReactDOM.findDOMNode(this)).dotdotdot(options);
  },
  
  componentWillUnmount: function() {
    $(ReactDOM.findDOMNode(this)).trigger('destroy.dot');
  },
  
  render: function() {
    return <div className={this.props.className}>
      {this.props.text}
    </div>;
  }
});
​
// I would not recommend this style of integration with React and your application,
// but it serves the purpose for this demo. If you're using Rails, I highly
// recommend looking at https://github.com/reactjs/react-rails
$('.dotdotdot').each(function() {
  const el = $(this);
  ReactDOM.render(<DotDotDot ellipsis={el.data().ellipsis} text={el.text()} className="dotdotdot" />, this);
})
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers