@sparing-software/v-clamp
npm i @sparing-software/v-clamp

@sparing-software/v-clamp

Vue directive plugin for text truncate

by SparingSoftware

1.0.1 (see all)License:MITTypeScript:Not Found
npm i @sparing-software/v-clamp
Readme

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

Downloads/wk

155

GitHub Stars

14

LAST COMMIT

3yrs ago

MAINTAINERS

3

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

7
VersionTagPublished
1.0.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial