Truncator

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