Truncate Text To Specific Number Of Lines – vue-snip

vue-snip is an easy Vue.js directive that truncates your long text to a specific number of lines.

How to use it:

1. Import and register the vue-snip.

import Vue from 'vue'
import VueSnip from 'vue-snip'
Vue.use(VueSnip)

2. Determine the maximum number of lines as follows:

// Using CSS method
<p v-snip="3"> ... </p>

// Using JS method
<p v-snip:js="3"> ... </p>

// OR
<p v-snip:[method]="maxLines"> ... </p>
export default {
  data () {
    return {
      method: 'js',
      maxLines: 3
    }
  }
}

3. Available options:

Vue.use(VueSnip,{
  directiveName: 'snip',
  snipMethod: 'css', // or js
  maxLines: 3,
  separators: ['. ', ', ', ' ', ''],
  ellipsis: '.\u200A.\u200A.',
  debugMode: false,
  exposeSnipFunction: false,
  snipFunctionName: 'snipText'
})

Preview:

Changelog:

v2.0.1 (02/19/2023)

• Fixes directive not updating the text correctly

v2.0.0 (03/13/2022)

• Directive API changed to mirror the js-snip API

Download Details:

Author: ajobi

Live Demo: https://ajobi.github.io/vue-snip/

Download Link: https://github.com/ajobi/vue-snip/archive/refs/heads/master.zip

Official Website: https://github.com/ajobi/vue-snip

Install & Download:

# Yarn
$ yarn add vue-snip

# NPM
$ npm i vue-snip