@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.

Stats

StarsIssuesVersionUpdatedCreatedSize
@clampy-js/vue-clampy
8251.0.63 years ago3 years agoMinified + gzip package size for @clampy-js/vue-clampy in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.