yuanqing / line-clamp

:clamp: Line clamp a DOM element in vanilla JavaScript

line-clamp

Line clamp a DOM element in vanilla JavaScript

• Truncates in pure JavaScript; does not rely on -webkit-line-clamp
• Works even if the given element contains nested DOM nodes
• Supports appending a custom string instead of an ellipsis (…)

Usage

Editable demo (CodePen)

HTML:

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

CSS:

.line-clamp {
  width: 100px;
  line-height: 20px;
}

JavaScript:

const element = document.querySelector('.line-clamp')
lineClamp(element, 3)

Boom:

<div class="line-clamp" style="overflow: hidden; overflow-wrap: break-word; word-wrap: break-word;">
  Lorem ipsum dolor sit amet, <strong>consectetur…</strong>
</div>

Limitations

• The element is assumed to have a pixel line-height, obtained via window.getComputedStyle.

API

const lineClamp = require('line-clamp')

lineClamp(element, lineCount [, options])

Returns true if text was truncated, else returns false.

options is an optional configuration object.

• Set options.ellipsis to change the string to be appended to the truncated text. Defaults to ….

See Usage.

Installation

$ yarn add line-clamp

Prior art

• Clamp.js
• FTEllipsis
• Shave

License

MIT