https://github.com/sherwinshen/vue3-text-clamp

📄 Vue3 component which allows you to ellipsis your multiline text
https://github.com/sherwinshen/vue3-text-clamp

component ellipsis-text text-clamp vue3

Last synced: about 5 hours ago
JSON representation

📄 Vue3 component which allows you to ellipsis your multiline text

• Host: GitHub
• URL: https://github.com/sherwinshen/vue3-text-clamp
• Owner: sherwinshen
• License: mit
• Created: 2022-08-13T05:18:55.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-07-28T23:18:06.000Z (4 months ago)
• Last Synced: 2024-11-11T20:33:13.858Z (5 days ago)
• Topics: component, ellipsis-text, text-clamp, vue3
• Language: Vue
• Homepage: https://sherwinshen.github.io/vue3-text-clamp
• Size: 200 KB
• Stars: 39
• Watchers: 1
• Forks: 5
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




Vue3 Text-Clamp


***Vue3** component which allows you to ellipsis your multiline text*, see more 👉 [homepage](https://sherwinshen.github.io/vue3-text-clamp/#/).

## Features

- Clamps text with max lines and/or max height. No need to specify line height.

- Place elllipsis at the end/middle/start of the clamped text and customize elllipsis string.

- Automatically updates upon layout change.

- The clamped text can be expanded/collapsed.

- Customizable and responsive content before/after clamped text.

## Install and Usage

```shell

$ npm install --save vue3-text-clamp

```

 ↓ Full import

```typescript

import { createApp } from 'vue';

import TextClamp from 'vue3-text-clamp';

import App from './App.vue';

createApp(App).use(TextClamp).mount('#app');

```

↓ Manually import

```vue

  

import TextClamp from 'vue3-text-clamp';

```

## Links

- [Home page](https://sherwinshen.github.io/vue3-text-clamp/#/)

- [Vue2 version](https://vue-clamp.vercel.app/)

## License

MIT License (MIT). Please see [License File](./LICENSE) for more information.