@clampy-js/vue-clampy

1.0.6 • Public • Published

vue-clampy

Build Status GitHub issues GitHub license npm

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 library (a fork of 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

<script>
import clampy from '@clampy-js/vue-clampy';
import Vue from 'vue';

Vue.use(clampy);

export default {
  name: 'app',
  directives: {
    clampy
  }
};
</script>
<template>
  <p v-clampy="3">Long text to clamp here</p>
</template>  

Options

You can also override default options globally:

Vue.use(clampy, {
  truncationChar: '✂️'
});
 

Package Sidebar

Install

npm i @clampy-js/vue-clampy

Weekly Downloads

368

Version

1.0.6

License

MIT

Unpacked Size

18.6 kB

Total Files

4

Last publish

Collaborators

  • alexandre.moore