1. Tutorials
  2. Vue.js

Vue Truncate by Line (vue-clamp)

September 27, 2020

vue-clamp

  • Tested to work on Vue v2, Vue v3 and Nuxt.js
  • Support both truncate only or truncate with toggle (more or less)

Install

npm i --save vue-clamp

For Nuxt.js, edit nuxt.config.js

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

Truncate only

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

<script>
import VClamp from 'vue-clamp

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

NOTE: Make sure the parent of v-clamp is not <p>, as <p> can’t hold other tags (will trigger The client-side rendered virtual DOM tree is not matching server-rendered content.). If you need v-clamp to be <p>, use tag="p".

Truncate with Toggle

<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>
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.