react-multiline-ellipsis

React higher order component to create multiline ellipsed boxes.

Usage no npm install needed!

<script type="module">
  import reactMultilineEllipsis from 'https://cdn.skypack.dev/react-multiline-ellipsis';
</script>

README

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.