rubencodes / react-multiline-ellipsis

React higher order component to create multiline ellipsed boxes.

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])

Parameter	Type	Description
componentClass	Class Name	The Component class name
numberOfLines	number	The number of text lines that we want our component to have
ellipsisString (Optional)	string	The string that we want to use as an ellipsis (defaults to '...')

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.