Truncate Text To Specific Number Of Lines - vue-snip

Install & Download:

# Yarn
$ yarn add vue-snip
# NPM
$ npm i vue-snip

Description:

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'
})