Vue.js directive that clamps the content of a text element if it exceeds the specified number of lines.
- 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.
# install with npm
npm install vue-snip
# or with yarn
yarn add vue-snipimport Vue from 'vue'
import VueSnip from 'vue-snip'
import App from './App'
Vue.use(VueSnip)
new Vue({ render: h => h(App) }).$mount('#app')import { createApp } from 'vue'
import VueSnip from 'vue-snip'
import App from './App'
createApp(App).use(VueSnip).mount('#app')<!-- 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>The library uses js-snip under the hood. You can find more about the options and how snipping works in its documentation.
All changes are documented in the change log.