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. In particular, the DOM element must have an explicitly set line-height in pixels.
• 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(element, { lineCount: 3 });

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(element, options)

• element — A DOM 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

See Usage above for the accompanying CSS.

Installation

Install via npm:

$ npm i --save line-clamp

Prior art

• Clamp.js
• FTEllipsis

License

MIT