All Projects → SparingSoftware → v-clamp

SparingSoftware / v-clamp

Licence: MIT license
Vue directive plugin for text truncate

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to v-clamp

ngx-line-truncation
An Angular line truncating solution. Truncate text block by given line number and add ellipsis to the end.
Stars: ✭ 13 (-13.33%)
Mutual labels:  truncate, ellipsis
shear.js
✂️truncate text across DOM nodes
Stars: ✭ 61 (+306.67%)
Mutual labels:  truncate, ellipsis
Shave
💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁
Stars: ✭ 2,113 (+13986.67%)
Mutual labels:  truncate, ellipsis
tailwindcss-truncate-multiline
Tailwind CSS plugin to generate truncate multiline utilities
Stars: ✭ 92 (+513.33%)
Mutual labels:  truncate, ellipsis
shave
💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁
Stars: ✭ 126 (+740%)
Mutual labels:  ellipsis
react-ellipsis
A high performance and customized ellipsis component for react, support rich text. 高性能、高度自定义、支持富文本的 react 缩略组件。
Stars: ✭ 63 (+320%)
Mutual labels:  ellipsis
angular-ellipsis
A simple lightweight library for Angular which removes excess text and add ellipsis symbol to end of text before text overflows container
Stars: ✭ 16 (+6.67%)
Mutual labels:  ellipsis
node-truncate
🐙 Truncate text and keeps urls safe.
Stars: ✭ 52 (+246.67%)
Mutual labels:  truncate
Voca
The ultimate JavaScript string library
Stars: ✭ 3,387 (+22480%)
Mutual labels:  truncate
react-middle-truncate
A React component for intelligently truncating text in the middle of the string.
Stars: ✭ 27 (+80%)
Mutual labels:  truncate
react-text-more-less
📃React component to show more text or show less
Stars: ✭ 16 (+6.67%)
Mutual labels:  truncate
strings-truncation
Truncate strings with fullwidth characters and ANSI codes.
Stars: ✭ 45 (+200%)
Mutual labels:  truncate

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].