Skip to content

Commit 6617875

Browse files
Update README.md
1 parent 6a08520 commit 6617875

File tree

1 file changed

+46
-0
lines changed

1 file changed

+46
-0
lines changed

README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,48 @@
11
# vue-clampy
22
Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.
3+
4+
It uses [@clampy-js/clampy](https://github.com/clampy-js/clampy) library (a fork of [Clamp.js](https://github.com/josephschmitt/Clamp.js)) behind the scene to apply the ellipsis.
5+
6+
It automatically re-clamps itself when the element or the browser window change size.
7+
8+
#### Installation
9+
You can install @clampy-js/vue-clampy using NPM or Yarn:
10+
11+
```
12+
npm install @clampy-js/vue-clampy
13+
```
14+
15+
```
16+
yarn install @clampy-js/vue-clampy
17+
```
18+
19+
#### Usage
20+
```typescript
21+
<script>
22+
import clampy from '@clampy-js/vue-clampy';
23+
import Vue from 'vue';
24+
25+
Vue.use(clampy);
26+
27+
export default {
28+
name: 'app',
29+
directives: {
30+
clampy
31+
}
32+
};
33+
</script>
34+
<template>
35+
<p v-clampy="3">Long text to clamp here</p>
36+
</template>
37+
```
38+
39+
#### Options
40+
You can also override default options globally:
41+
42+
```typescript
43+
44+
Vue.use(clampy, {
45+
truncationChar: '✂️'
46+
});
47+
48+
```

0 commit comments

Comments
 (0)