@sparing-software/v-clamp

Vue directive plugin for text truncate
3,655 15
Install
npm install @sparing-software/v-clamp
Latest Version:1.0.1
License:MIT
Last Updated:Jan 4, 2023
Links: GitHub  ·  npm

V-clamp :speech_balloon:

MIT license Downloads number JavaScript Style Guide

Vue directive plugin for text truncate. Plugin cuts too long text and replace it with ellipsis.

Comparison basic multiline text-overflow and multiline text with use v-clamp directive

How to use

Installation

Install package in your project

$ npm install @sparing-software/v-clamp

Configuration

Basic config in Vue app by global import plugin in main.js file

import Clamp from '@sparing-software/v-clamp'

Vue.use(Clamp)

Implementation

All you need to do is add v-clamp directive to element on which you want to ellipsis overflow and specify its height or max-height style property.

Look at the example below:

<template>
  <p v-clamp class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</template>

<style>
  .text {
     max-height: 100px;
  }
</style>

Contributing

Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!

License

MIT License © Sparing Interactive

Related Packages

@lg2/nuxt3-plugin-link-resolver

link resolver plugin fro nuxt3

3,544 0
vue-truncate-read-more

A Vue.js V3/2 plugin for truncating text with a 'Read More' button to expand the...

7,699 6
@miii/vue-lettering

Web typography tool for Vue to split text into pieces for CSS selection with eas...

630 10
@codecov/nuxt-plugin

Official Codecov Nuxt plugin

60,084
nuxt-electron

Nuxt Integration with Electron

38,592 229

Version History

Version Released License
1.0.1 MIT
1.0.0 MIT