# lesstextjs

> A react component that display multiple lines of text which is truncated at the end.

Latest version **1.0.0** (published 2018-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install lesstextjs
pnpm add lesstextjs
yarn add lesstextjs
bun add lesstextjs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-07-25 |
| First published | 2018-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ipip2005 |

## Links

- npm: https://www.npmjs.com/package/lesstextjs
- npm.io page: https://npm.io/package/lesstextjs

## Recent versions

- 1.0.0 (latest) — 2018-07-25
- 0.0.8 — 2018-07-25
- 0.0.7 — 2018-07-25
- 0.0.6 — 2018-07-25
- 0.0.5 — 2018-07-25
- 0.0.4 — 2018-07-25
- 0.0.3 — 2018-07-25
- 0.0.2 — 2018-04-02
- 0.0.1 — 2018-04-02

## README

# lesstextjs <UNDER DEVELOPMENT>
At the world of web development, one of the most common scenario which is not built-in cross-browser is called truncated-multiple-lines-of-text.

While `text-overflow: ellipsis;` only resolves single line truncation of the text element, and only chrome provides bulit-in solution to multiline truncation which is CSS property `-webkit-line-clamp`. We, as web UI developer, really need to a simple and cross-browser solution to support multiline truncation.

## Demo
### Simple truncation with multiple lines
https://codesandbox.io/s/j20q95zq7v

### Truncate only part of the sentence
https://codesandbox.io/s/p5m07y2jzm

### Use space character to separate words and do not truncate the last word. (Avoid any word to be broken up and losing meaning)
https://codesandbox.io/s/52vk27677n

## Features
 - Truncate any part of a multiline text and truncated text will end with `...`.

## TODOS

 - Given options for hanlding element resize:
  1. JS library to detect element resize, so user have an ultimate experience. But it cost computing resources so doesn't fit the case there're many LessText objects.
  2. Change the LessText to class. We should provide several public API so consumer can update whenever they want.
 - Truncate using requestAnimationFrame for better performance

---
_Source: https://npm.io/package/lesstextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._