v-dotdotdot

vue directive for ellipsis on multiple line content

Usage no npm install needed!

<script type="module">
  import vDotdotdot from 'https://cdn.skypack.dev/v-dotdotdot';
</script>

README

v-dotdotdot

vue directive for ellipsis on multiple line content

Usage

// global register in main.js or import inside the component and use as directive
import Dotdotdot from 'v-dotdotdot'
import 'v-dotdotdot/dist/v-dotdotdot.css'

Vue.use(Dotdotdot)
// Vue.use(Dotdotdot, { line: 2 })

<component v-dotdotdot />
// <component v-dotdotdot="{ line: 3, className: 'my-class', moreType: 'icon' }" />

Configuration

option description type defaut
line num of line to keep in clamp number 0 (no clamp)
className custom class name string ''
moreType type of more tag text | icon text
moreText text of more tag string 'show more' (effect with text moreType only)
disableAutoDot auto clamp with dot initially boolean false