Layout specific text truncator considering line length, content height or character length.
JavaScript Shell
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
src
test
.babelrc
.eslintrc.yml
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
testem.yml

README.md

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