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:
| Property | Default | Description |
|---|---|---|
| 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'. |
| maxLines | 3 | Global 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. |
| debugMode | false | Exposes directive state as the window.__VueSnipState |
| exposeSnipFunction | false | Exposes 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.
