line-clamp

line-clamp

Truncate multi-line text in a DOM element.

Features

• Exit if we detect that no truncation is necessary (ie. content does not overflow container).
• Allows use of a custom string instead of an ellipsis.

Limitations

• Requires some CSS to be set on the DOM element and its parent.
• Truncation is in pure JavaScript; does not use -webkit-line-clamp.
• Assumes that the text to be truncated does not contain any inline HTML tags (eg. em, strong, etc.).

Usage

HTML

<div class="line-clamp-wrapper">
  <div class="line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

CSS

.line-clamp-wrapper {
  height: 60px;
  overflow: hidden;
}
.line-clamp {
  width: 100px;
  line-height: 20px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

JavaScript

import lineClamp from 'line-clamp';

lineClamp({
  lineCount: 3,
  lineHeight: 20
})(element);

Example

To run the example, do:

$ git clone https://github.com/yuanqing/line-clamp
$ npm install
$ npm install --global gulp
$ gulp example --open

API

import lineClamp from 'line-clamp';

lineClamp(options)(element)

• options — An object literal:

  Key	Description	Default
  ellipsisCharacter	The string to append to the truncated text.	\u2026
  lineCount	Required. The number of lines to show.	undefined
  lineHeight	Required. The pixel line-height of each line. Specify just the number eg. 20 instead of 20px.	undefined

• element — A DOM element.

See Usage above for the accompanying CSS.

Installation

Install via npm:

$ npm i --save line-clamp

Prior art

• Clamp.js
• FTEllipsis

License

MIT