# vue-live-ellipsis

> Vue component for truncating text with ellipsis based on CSS constraints, with live recalcuation

Latest version **1.0.0** (published 2020-05-29) · 0 weekly downloads

## Install

```sh
npm install vue-live-ellipsis
pnpm add vue-live-ellipsis
yarn add vue-live-ellipsis
bun add vue-live-ellipsis
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-29 |
| First published | 2020-05-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 428.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | tennisgent |

## Links

- npm: https://www.npmjs.com/package/vue-live-ellipsis
- npm.io page: https://npm.io/package/vue-live-ellipsis

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 1.0.0 (latest) — 2020-05-29
- 0.0.4 — 2020-05-29
- 0.0.3 — 2020-05-29
- 0.0.2 — 2020-05-29
- 0.0.1 — 2020-05-29

## README

# vue-live-ellipsis

## Description

`vue-live-ellipsis` is a component for text truncation using an ellipsis that is controlled only by CSS. The component will automatically clamp text to fill whatever container it is placed in. Simply add styles to constrain the size of a containing element, and `vue-live-ellipsis` will calculate the ellipsis position and rerender the component whenever the container size is adjusted. This is very helpful in responsive web apps where content is frequently changing. While there are alternatives, most of them rely on setting a fixed number of lines that you want to clamp. but sometimes that isn't a fixed value and may be difficult to calculate. Instead, this component takes in no sizing props and instead relies upon the size of the component's parent container.

## Installation
```
yarn add vue-live-ellipsis
// or 
npm i --save vue-live-ellipsis
```

## Basic Usage

```html
<template>
  <div class="container">
    <Ellipsis :text="text" :position="position" />
  </div>
</template>
<script>
import Ellipsis from 'vue-live-ellipsis'

export default {
    name: "MyComponent",
    components: { Ellipsis },
    data() {
        return {
            position: 'middle',
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        };
    }
}
</script>
<style scoped>
.container {
    max-width: 300px;
    max-height: 40px; /* approx height of 2 lines */
    font-size: 18px;
}
</style>
```

### Props

| Prop  | Type  | Default  | Description |
|---|---|---|---|
| `text`  | `String`  | `''`  | The text that will be truncated if there is too much text to fit inside the container |
| `position`  | `String`  | `'end'`  | Position for placing the ellipsis character. Must be one of: `'start'`, `'middle'` or `'end'` |

### Alternative Libraries

- [`Luobata/vue-text-ellipsis `](https://github.com/Luobata/vue-text-ellipsis)
- [`Justineo/vue-clamp `](https://github.com/Justineo/vue-clamp)
- [`jypblue/vue-ellipsis `](https://github.com/jypblue/vue-ellipsis)
- [`hyjiacan/vue-ellipsis`](https://github.com/hyjiacan/vue-ellipsis)
- [`Frondor/vue-line-clamp `](https://github.com/Frondor/vue-line-clamp)

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