https://github.com/clampy-js/vue-clampy

Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.
https://github.com/clampy-js/vue-clampy

Last synced: about 2 months ago
JSON representation

Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

• Host: GitHub
• URL: https://github.com/clampy-js/vue-clampy
• Owner: clampy-js
• License: mit
• Created: 2018-05-22T14:01:27.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-09-18T12:01:22.000Z (over 3 years ago)
• Last Synced: 2024-03-25T20:23:24.139Z (2 months ago)
• Language: JavaScript
• Size: 59.6 KB
• Stars: 79
• Watchers: 3
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (UI Components / Miscellaneous)
• awesome-vue - vue-clampy ★18 - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (UI Components / Miscellaneous)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (UI Components / Miscellaneous)
• awesome-vue - vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. (Components & Libraries / UI Components)

README

        
# vue-clampy

[![Build Status](https://img.shields.io/travis/clampy-js/vue-clampy.svg)](https://travis-ci.org/clampy-js/vue-clampy)

[![GitHub issues](https://img.shields.io/github/issues/clampy-js/vue-clampy.svg)](https://github.com/clampy-js/vue-clampy/issues)

[![GitHub license](https://img.shields.io/github/license/clampy-js/vue-clampy.svg)](https://github.com/clampy-js/vue-clampy/blob/master/LICENSE)

[![npm](https://img.shields.io/npm/dt/@clampy-js/vue-clampy.svg)](https://www.npmjs.com/package/@clampy-js/vue-clampy)

Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

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.

It automatically re-clamps itself when the element or the browser window change size.

#### Installation

You can install @clampy-js/vue-clampy using NPM or Yarn:

```

npm install @clampy-js/vue-clampy

```

```

yarn install @clampy-js/vue-clampy

```

#### Usage

```typescript

import clampy from '@clampy-js/vue-clampy';

import Vue from 'vue';

Vue.use(clampy);

export default {

  name: 'app',

  directives: {

    clampy

  }

};

  
Long text to clamp here

  

```


#### Options

You can also override default options globally:

```typescript

Vue.use(clampy, {

  truncationChar: '✂️'

});

 

```