line-clamp

Line clamp a DOM element in vanilla JavaScript

Usage no npm install needed!

<script type="module">
  import lineClamp from 'https://cdn.skypack.dev/line-clamp';
</script>

README

line-clamp npm Version Build Status Bundle Size

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

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

License

MIT