vue-snip

Vue.js directive that clamps the content of a text element if it exceeds the specified number of lines.

Key features:

• two snipping approaches (CSS / JavaScript) picked on a per-element basis
• no need to specify line heights
• re-snipping on element resize and reactive data change

To get a hands-on experience try the Interactive Demo.

Installation

# install with npm
npm install vue-snip

# or with yarn
yarn add vue-snip

Vue 2

import Vue from 'vue'
import VueSnip from 'vue-snip'
import App from './App'

Vue.use(VueSnip)

new Vue({ render: h => h(App) }).$mount('#app')

Vue 3

import { createApp } from 'vue'
import VueSnip from 'vue-snip'
import App from './App'

createApp(App).use(VueSnip).mount('#app')

Usage

<!-- minimal example -->
<template>
  <p v-snip> ... </p>
</template>

<!-- with options -->
<template>
  <p v-snip="{ lines: 3 }"> ... </p>
</template>

<!-- with several options -->
<template>
  <p v-snip="{ lines: 3, mode: 'js', midWord: false }"> ... </p>
</template>

<!-- with options and callback -->
<template>
  <p v-snip="{ lines: 3, onSnipped }"> ... </p>
</template>

<script>
export default {
  data () {
    return {
      hasEllipsis: false,
    }
  },
  methods: {
    onSnipped (newState) {
      this.hasEllipsis = newState.hasEllipsis
    }
  }
}
</script>

How it works

The library uses js-snip under the hood. You can find more about the options and how snipping works in its documentation.

Change Log

All changes are documented in the change log.