Vue Clampy Save

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

Project 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: '✂️'
});
 
Open Source Agenda is not affiliated with "Vue Clampy" Project. README Source: clampy-js/vue-clampy
Stars
79
Open Issues
6
Last Commit
3 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating