A simple, fast and lightweight vue 3 directive for truncating multi line texts.
npm install vue3-line-clampbash
$ npm i --save-dev vue3-line-clamp
or
$ yarn add -D vue3-line-clamp
`
Usage
`js
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import v3lc from "vue3-line-clamp";
const app = createApp(App);
app.use(v3lc, {
// options
});
app.mount("#app");
`
Add directive to template:
`html
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias voluptatum
quibusdam provident eum ipsa omnis harum repellendus dignissimos dicta ad
illo, aliquam rerum natus eos laudantium dolorum et itaque saepe?
`
Where $ is a number indicating the maximum number of lines in the text.
$3
Options
| Property | Type | Default | Description |
| ------------ | ------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
| useClass | Boolean | false | Set to true in order to import styles into automatically, element.style is used by default. |
| textOverflow | String | '' | Set the value for text-overflow property. |
| wordBreak | String | 'break-word' | Set the value for word-break` property. |