Skip to content

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

License

Notifications You must be signed in to change notification settings

clampy-js/vue-clampy

Repository files navigation

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: '✂️'
});
 

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published