@sparing-software/v-clamp

    1.0.1 • Public • Published

    V-clamp 💬

    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

    Install

    npm i @sparing-software/v-clamp

    DownloadsWeekly Downloads

    157

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    8.62 kB

    Total Files

    9

    Last publish

    Collaborators

    • adrianklimek
    • argeento
    • vladyslavprosolupovsparing