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 i vue-snip

1. Import and register vue-snip.

import Vue from 'vue'
import VueSnip from 'vue-snip'

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:

  directiveName: 'snip',
  snipMethod: 'css', // or js
  maxLines: 3,
  separators: ['. ', ', ', ' ', ''],
  ellipsis: '.\u200A.\u200A.',
  debugMode: false,
  exposeSnipFunction: false,
  snipFunctionName: 'snipText'

Options object:

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.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…