ajobi / vue-snip

Vue.js directive that clamps the content of a text element if it exceeds specified number of lines.

vue-snip

Vue.js directive that clamps the content of a text element if it exceeds the specified number of lines.

Key features:

• 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.

Installation

# install with npm
npm install vue-snip

# or with yarn
yarn add vue-snip

Vue 2

import Vue from 'vue'
import VueSnip from 'vue-snip'
import App from './App'

Vue.use(VueSnip)

new Vue({ render: h => h(App) }).$mount('#app')

Vue 3

import { createApp } from 'vue'
import VueSnip from 'vue-snip'
import App from './App'

createApp(App).use(VueSnip).mount('#app')

Usage

<!-- 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>

How it works

The library uses js-snip under the hood. You can find more about the options and how snipping works in its documentation.

Change Log

All changes are documented in the change log.

vue-snip's Issues

Directive overwrites inline css

Reproducer

<div v-snip="2" style="min-height: 3em;">
  Test
</div>

Nuxt 3 compatibility

I wrote a simple plugin for VueShip

import VueShip from 'vue-snip'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueShip);
});

I use it like this

<span v-ship="{lines: 2}">My long text</span

But I get an error
[Vue warn]: Failed to resolve directive: ship

VueJS: 3.3.4
Nuxt: 3.5.3
VueShip: 2.0.1

Performance problems

I am using this in a v-for loop that has items that use v-snip as follows:

v-snip="{ lines: 2 }"

Once I add that, my render time for 2000 items goes from under 1 second to over 10 seconds. Ideas what I could be doing wrong? I even have a keep-alive around the whole thing and it still takes forever.

Vue 3 Compatibilty

Hello, I see in your Readme that this is compatible with Vue 3 - is there something different that I need to do within a Vue 3 use case? It is not working in any situations for me currently...

Noticed this error in the console: Uncaught (in promise) TypeError: Cannot read property 'maxLines' of undefined

Data is not updated

I have updated the data, but it still shows the old data

Programmatically detect snipping

Is there a way to tell if a text was snipped?
For example to show a "read more" link.

ResizeObserver loop error thrown

Found out about this error after my browser error tracker quota got filled. It is not normally visible in the console but the error tracker picks it up, a lot. Probably each time a page that contains v-snip is rendered.

How to reproduce:

1. Go to demo page https://ajobi.github.io/vue-snip/
2. Write to console: window.onerror = console.log
3. Adjust max lines prop in the form.
4. Observe ResizeObserver loop completed with undelivered notifications appearing in the console.

The error is thrown in other cases as well when visibility of ellipsis needs checking . Some of them:

1. toggle "Snip the card text" checkbox value,
2. change window width after removing demo page's 500px width style. Window with change should be in the range to trigger changes to ellipsis state,
3. change card width to make ellipsis appear or disappear.

Versions used:
vue-snip: 2.0.1
js-snip: 1.2.0

v-snip should not remove non-text content on CSS type

I wanted to make something like the above (this is with manually modified HTML). It appears that this is due to this line, which seems like it is only needed for the JS method, and can probably be removed here?