Clamping Multiline Text With Vue - vue-clamp

Install & Download:

# NPM
$ npm install vue-clamp --save

Description:

vue-clamp is a responsive text truncation component that clamps text with max lines and/or max height. No need to specify line height.

Features:

Automatically updates upon layout change.
The clamped text can be expanded/collapsed.
Customizable and responsive content before/after clamped text.

How to use it:

1. Import and register the VClamp component.

import VClamp from 'vue-clamp'

export default {
  components: {
    VClamp
  },
}

2. Add the VClamp component to the template and define the text as follows:

<template>
  <v-clamp autoresize :max-lines="2">{{ text }}</v-clamp>
</template>

export default {
  components: {
    VClamp
  },
  data () {
    return {
      text: 'Long Text Here'
    }
  }
}

3. Available component props.

tag: {
  type: String,
  default: 'div'
},
autoresize: {
  type: Boolean,
  default: false
},
maxLines: Number,
maxHeight: [String, Number],
ellipsis: {
  type: String,
  default: '…'
},
location: {
  type: String,
  default: 'end',
  validator (value) {
    return ['start', 'middle', 'end'].indexOf(value) !== -1
  }
},
expanded: Boolean