Vue Truncate by Line (vue-clamp)

npm i --save vue-clamp

export default {  build: {    transpile: ['vue-clamp', 'resize-detector']  },}

<template>  <div>    <v-clamp :max-lines="2" autoresize>{{ description }}</v-clamp>  </div></template><script>import VClamp from 'vue-clampexport default {  data() {    return {      description: "The cactus wren (Campylorhynchus brunneicapillus) is a large wren that is endemic to the deserts of the United States and Mexico. It is the state bird of Arizona. The wren's upperparts are brown with black and white spots and the underparts are cinnamon-buff with a whiter breast; it has striking white eyebrows. The song is loud and raspy. Cactus wrens are ground feeders and eat mainly insects, with some plant material; they can meet their water needs from their diet."    }  }  components: {    VClamp  }}</script>

<v-clamp :max-lines="2" autoresize >  {{ description }}  <template #after="{ toggle, expanded, clamped }">    <a      href="#"      v-if="expanded || clamped"      class="ml-1 badge badge-light"      @click.prevent="toggle"    >{{ expanded ? 'Less' : 'More' }}</a>  </template></v-clamp>