Press "Enter" to skip to content

Vue.js Truncate Text Element To Specific Number Of Lines | vue-snip

A Vue.js snip directive clamps/pins the content of a text element if it exceeds the specified number of lines.

truncate text css show more, truncate text javascript, truncate text online, truncate text vue native, css truncate text after 2 3 lines, vue-truncate-collapsed, vue limit string length

Features features:

  • Two snipping methods (CSS/JavaScript) were selected based on each element
  • No need to specify line heights
  • Re-crop when object resizes and interactive data changes
  • No dependencies (small and fast)

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-snip

# NPM
$ npm i vue-snip

1. Import and register vue-snip.

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

2. Define 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'
})

Options object:

PropertyDefaultDescription
directiveName'snip'The name of the directive in your templates. Gets prefixed with v- (f.e. v-snip).
snipMethod'css'Global snipping approach. Will be used for the element if no explicit method argument is passed in for that element. Should equal 'css' or 'js'.
maxLines3Global max lines. Will be used for the element if no explicit maxLines value is passed in for that element.
separators['. ', ', ', ' ', '']Used internally to split the innerText of the element into chunks and find the snipped text in an effective way. Note: Property only applies to the JS approach.
ellipsis'.\u200A.\u200A.'A character or a group of characters displayed at the end of the snipped text. Note: Property only applies to the JS approach. You cannot change the ellipsis when using the CSS method.
debugModefalseExposes directive state as the window.__VueSnipState
exposeSnipFunctionfalseExposes the internal snip function ((el: Element) => void) as the instance property via Vue.prototype.
snipFunctionName'snipText'The name of the exposed instance property. Gets prefixed with $ (f.e. this.$snipText).

Truncate Text To Specific Number Of Lines, vue snip Plugin/Github


See Demo And Download

Official Website(ajobi): Click Here

This superior jQuery/javascript plugin is developed by ajobi. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.