TextClamp for Vue 3.0

English | 中文

Demo Here

Introduction

TextClamp is a lightweight Vue 3 component for elegant text truncation with "expand/collapse" functionality. It provides an intuitive way to handle large blocks of text in your Vue applications.

Features

• ⚡️ Lightweight - Minimal impact on your bundle size (~5.7KB gzipped)
• 🔥 Simple API - Just pass your text and go!
• 📐 Line Control - Specify exactly how many lines to display
• 🎨 Customizable Buttons - Choose button position and style
• 🔄 Reactive - Responds to all prop changes in real-time
• 🔍 Type-safe - Written in TypeScript for better development experience
• 🧩 Slot Support - Customize expand/collapse buttons with slots
• 🎯 Zero Dependencies - Uses native browser capabilities

Installation

npm install text-clamp-for-vue3

Basic Usage

Option 1: Import and register component globally

import { createApp } from 'vue'
import App from './App.vue'
import TextClamp from 'text-clamp-for-vue3'

const app = createApp(App)
app.use(TextClamp)
app.mount('#app')

Option 2: Import component directly in your Vue file

<template>
  <TextClamp :text="myText" />
</template>

<script setup>
import { TextClamp } from 'text-clamp-for-vue3';

const myText = "This is a long text that will be truncated...";
</script>

Props

Custom Button Styling

There are two ways to customize the button:

1. Using Props (Recommended)

The simplest way to customize the button is to use the provided props:

<TextClamp 
  :text="myText" 
  buttonStyle="primary"
  buttonAlign="left"
  buttonClass="my-custom-button"
  expandText="Show More"
  collapseText="Show Less"
/>

This approach allows you to:

• Choose from predefined button styles
• Set alignment
• Add custom CSS classes
• Customize text
• No need to write additional template code

2. Using Slots (Advanced)

For complete customization, you can use the expandButton slot:

<TextClamp :text="myText">
  <template #expandButton="{ toggle, isExpanded }">
    <button class="my-custom-button" @click="toggle">
      {{ isExpanded ? 'Show Less' : 'Show More' }}
    </button>
  </template>
</TextClamp>

Examples

Basic Example

<TextClamp :text="myText" />

Custom Line Count

<TextClamp :text="myText" :lines="2" />

One-line Button with Left Alignment

<TextClamp :text="myText" buttonType="one-line" buttonAlign="left" />

Primary Button Style

<TextClamp :text="myText" buttonStyle="primary" />

Outline Button Style without Icon

<TextClamp 
  :text="myText" 
  buttonStyle="outline"
  :buttonIcon="false"
/>

Custom Button Class

<TextClamp 
  :text="myText" 
  buttonClass="my-custom-button"
/>

Browser Support

TextClamp works in all modern browsers that support Vue 3:

• Chrome
• Firefox
• Safari
• Edge

License

MIT