node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

truncator

Truncator

npm version Build Status

Layout specific text truncator considering line length, content height or character length.

Installation

You can install truncator from npm.

$ npm install truncator --save

If you are using module loader such as Rollup or Webpack:

import { truncate } from 'truncator';

Also, you can use it from unpkg:

<!-- Normal build -->
<script src="https://unpkg.com/truncator"></script>
<!-- Minified build -->
<script src="https://unpkg.com/truncator/dist/truncator.min.js"></script>
var truncate = Truncator.truncate;

Usage

Just call truncate function then the specified text will be truncated.

var truncator = truncate(el, text, options);
  • el: HTMLElement that will be input text.
  • text: Truncate target string.
  • options: Truncate options object.
    • line, height or count
    • ellipsis: Ellipsis symbol. null indicates no symbol will be added. default: '...'

The returned object has the following methods:

  • recalc(): Retry to truncate the initially given el and text on the current state. It is useful if you want to adapt resizing the container element.
  • restoreText(): Restore the original text on el.
// Re-truncate the text
truncator.recalc();
 
// Restore the original text
truncator.restoreText();

Example

var el = document.getElementById('wrapper');
var truncator = truncate(el, 'Target text', { line: 3, ellipsis: null });
 
window.addEventListener('resize', function () {
  truncator.recalc();
});

License

MIT