react-multiline-ellipsis v1.0.3

react-multiline-ellipsis

React higher order component to create multiline ellipsed boxes.

Adds an ellipsis text (and hides the rest) if the original text is longer than the desired number of lines.

API

ellipsis(componentClass, numberOfLines [, ellipsisString])

This example shows a box that is going to get an ellipsis ' (...)' if the text takes more than 3 lines.

import React, { Component, PropTypes } from 'react'
import { ellipsis } from 'react-multiline-ellipsis'

class MyTextBox extends Component {
  render () {
    return <div>{this.props.text}</div>
  }
}

MyTextBox.propTypes = {
  text: PropTypes.string.isRequired,
}

export default ellipsis(MyTextBox, 3, ' (...)')

Notes:

• In order for this to work, the html container of the text shouldn't have any property that sets a height. So no height, max-height, min-height, etc.
• Sometimes, depending on the amount of JavaScript on the page, it might be flaky and not execute. Most of the time this is not an issue, but it should be fixed at some point.