# dom-text-ellipsis

> a text-ellipsis plugin with common js use.

Latest version **0.0.2** (published 2017-12-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install dom-text-ellipsis
pnpm add dom-text-ellipsis
yarn add dom-text-ellipsis
bun add dom-text-ellipsis
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2017-12-19 |
| First published | 2017-12-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | luobata |
| Maintainers | luobata |

## Links

- npm: https://www.npmjs.com/package/dom-text-ellipsis
- Repository: https://github.com/Luobata/dom-text-ellipsis
- Homepage: https://github.com/Luobata/dom-text-ellipsis#readme
- Issues: https://github.com/Luobata/dom-text-ellipsis/issues
- npm.io page: https://npm.io/package/dom-text-ellipsis

## Dependencies (1)

- [text-ellipsis-core](https://npm.io/package/text-ellipsis-core.md) 0.0.5

## Recent versions

- 0.0.2 (latest) — 2017-12-19
- 0.0.1 — 2017-12-19

## README

# dom-text-ellipsis
a text-ellipsis plugin with common js use.

## Intro
The situation when you need text ellipsis more then one line and the browser doesn't support the css style `-webkit-line-clamp`.
This lib hasn't add the test of `-webkit-line-clamp`.If you are using mobile browsers, use `-webkit-line-clamp` instead.

## Install
```
npm install --save-dev dom-text-ellipsis
```

## Link
If you are using Vue, use the package [vue-text-ellipsis](https://github.com/Luobata/vue-text-ellipsis) instead.

## Usage
```js
import ellipsis from 'dom-text-ellipsis';

ellipsis.config({
    lineNum: 2,
    fontFamily: 'microsoft yahei',
    fontWeight: 'bold',
    fontSize: '14px',
    left: '...',
    tagName: 'p',
    resize: false,
});

const ells = document.querySelectorAll('.ell');
ellipsis.init(ells);
```
```html
<div class="par">
    <div class="ell" lineNum="4" text="这是一句很长很长的话，到底有多长呢 自己感受一下 够长了吧 还没感受到？那再感受下"></div>
    </br>
    <div class="ell" lineNum="4" text="这是一句很长很长的话，到底有多长呢 自己感受一下 够长了吧 还没感受到？那再感受下" resize="true"></div>
</div>
```

## Config
You can add config when `ellipsis.config` to set global-config or use the attribute on vue elempent.

## Property

| Props      | Type            | Default                                 | Effect                                   |
| ---------- | --------------- | --------------------------------------- | ---------------------------------------- |
| width      | String          | The parentsElement's offsetWidth.       | The max width for one line.              |
| lineNum    | Number          | 2    (from global config)               | The max line.                            |
| fontFamily | String          | microsoft yahei    (from global config) | The fontFamily to calculate the width.   |
| fontSize   | String\| Number | 14px    (from global config)            | The fontSize to calculate the width.     |
| tagName    | String          | p    (from global config)               | The tag to show the text.                |
| left       | String          | '…'    (from global config)             | The String add on the end of the last line. |
| resize     | Boolean         | False    (from global config)           | Add the eventListener resize to window to watch the window change. |

## Methods

| Method | Args                               | Effect                                   |
| ------ | ---------------------------------- | ---------------------------------------- |
| config | Object: obj                        | Update the global config.                |
| init   | NodeList: doms \| HTMLElement: dom | Init the ellipsis dom by the config global and attribute both. |
| watch  | NodeList: doms \| HTMLElement: dom | init the ellipsis dom and watch the change of attribute. |

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