/react-line-clamp

cross browser line clamp for react

Primary LanguageJavaScriptMIT LicenseMIT

React Line Clamp npm version

NOTE this is a fork of the excellent https://github.com/ShinyChang/react-text-truncate. please use that project unless you specifically need a) no onresize events b) css support in webkit.

Install

npm install react-text-truncate

Usage

import TextTruncate from 'react-text-truncate'; // recommend
var TextTruncate = require('react-text-truncate'); // CommonJS or UMD

Markup

<TextTruncate
	line={1}
	truncateText="…"
	text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    textTruncateChild={<a href="#">Read on</a>}
    />

Demo

FAQ

  1. Why TextTruncate not shown after display changed?

    You must trigger update manually.

  2. Will TextTruncate support IE10 or below?

    No! IE 10 and below are dead according to Microsoft post.

Changelog

  • 0.8.3 IE 11 compatibility
  • 0.8.2 Fix wrong truncating when a container has long words without spaces
  • 0.8.1 Fix textTruncateChild bug
  • 0.8.0 Drop showTitle, put textTruncateChild in same line if tagName is A or SPAN
  • 0.7.2 Server render will display all text
  • 0.7.1 Add new prop containerClassName
  • 0.7.0 Fix infinite update bug, drop raf
  • 0.6.2 Fix infinite loop bug
  • 0.6.1 Fix lib issue for browser
  • 0.6.0 Support React 15
  • 0.5.2 Fix server render bug
  • 0.5.1 Hide textTruncateChild when nothing truncated
  • 0.5.0 Add request animation frame
  • 0.4.0 New property textTruncateChild for show more or others
  • 0.3.7 Support CommonJS and UMD module loader
  • 0.3.5 Fix window resize issue
  • 0.3.4 supports Babel6
  • 0.2.0 supoorts React 0.14
  • 0.1.5 supports React 0.13.3 and below