https://github.com/ktsn/truncator

Layout specific text truncator considering line length, content height or character length.
https://github.com/ktsn/truncator

text truncate truncator ui

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ktsn/truncator
• Owner: ktsn
• License: mit
• Created: 2016-01-09T06:32:45.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-01-18T11:07:30.000Z (about 7 years ago)
• Last Synced: 2024-11-08T08:49:29.942Z (3 months ago)
• Topics: text, truncate, truncator, ui
• Language: JavaScript
• Homepage:
• Size: 127 KB
• Stars: 12
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Truncator

[![npm version](https://badge.fury.io/js/truncator.svg)](https://badge.fury.io/js/truncator)

[![Build Status](https://travis-ci.org/ktsn/truncator.svg?branch=master)](https://travis-ci.org/ktsn/truncator)

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

## Installation

You can install truncator from npm.

```sh

$ npm install truncator --save

```

If you are using module loader such as [Rollup](http://rollupjs.org/) or [Webpack](https://webpack.github.io/):

```js

import { truncate } from 'truncator';

```

Also, you can use it from [unpkg](https://unpkg.com):

```html

```

```js

var truncate = Truncator.truncate;

```

## Usage

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

```js

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`.

```js

// Re-truncate the text

truncator.recalc();

// Restore the original text

truncator.restoreText();

```

### Example

```js

var el = document.getElementById('wrapper');

var truncator = truncate(el, 'Target text', { line: 3, ellipsis: null });

window.addEventListener('resize', function () {

  truncator.recalc();

});

```

## License

MIT