`","symbol":"v-line-clamp directive usage","correct":"
Long text...
"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport lineClamp from 'vue-line-clamp-3';\n\nconst App = {\n template: `\n\n This is a very long piece of text that needs to be truncated to exactly two lines. If the browser\n supports '-webkit-line-clamp', it will use that for truncation and add an ellipsis. Otherwise,\n a fallback method using a calculated maximum height based on the provided line-height of 20px\n will be applied to clamp the text. This demonstrates the basic usage of the v-line-clamp directive\n to manage multi-line text overflow across different browser environments.\n
\n\n Here's another example with a different line count and line height to show its flexibility.\n The directive will adapt to these values to ensure the text is truncated correctly.\n Remember that the argument after the colon (e.g., :18) specifies the line-height for the fallback mechanism,\n and the value (e.g., =\"3\") specifies the desired number of lines.\n
\n` elements in a Vue 3 component. It shows the `v-line-clamp:lineHeight=\"numberOfLines\"` syntax, highlighting its role in controlling text truncation and cross-browser fallbacks."},"warnings":[{"fix":"Rewrite plugin registration from `Vue.use(lineClamp)` to `import { createApp } from 'vue'; const app = createApp({}); app.use(lineClamp);`.","message":"Migrating from the original `vue-line-clamp` (Vue 2) to `vue-line-clamp-3` (Vue 3) requires updating to the Vue 3 application setup (`createApp` and `app.use()`) as `Vue.use()` is no longer available. This is a fundamental change in Vue's plugin registration API.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure the argument after the colon is a numeric `line-height` (e.g., `v-line-clamp:20`) and the bound value is the desired `numberOfLines` (e.g., `= \"2\"`).","message":"The directive syntax `v-line-clamp:lineHeight=\"numberOfLines\"` can be confusing. The argument after the colon (`:lineHeight`) *must* be a number representing the `line-height` in pixels, which is used for the fallback method in browsers not supporting `-webkit-line-clamp`. The bound value (`=\"numberOfLines\"`) is the actual number of lines to clamp to.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware of this visual difference in older/unsupported browsers. Consider providing alternative styling or custom fallback logic via the `fallbackFunc` plugin option if ellipsis is critical for all environments.","message":"The JavaScript fallback method, used for browsers that do not support `-webkit-line-clamp`, does not display an ellipsis (`...`) at the end of the truncated text. This is a known limitation because the fallback cannot reliably control the specific part of the text node to clamp.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test thoroughly with custom fonts. If issues arise, consider adjusting `line-height` values, or providing a custom `fallbackFunc` with more robust measurement techniques, or opening an issue with a reproduction.","message":"There may be potential inconsistencies or problems when loading custom fonts. While tests have not revealed issues, custom font rendering and measurement can sometimes interfere with the directive's height calculations, particularly for the JavaScript fallback.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `app` is a valid Vue application instance: `import { createApp } from 'vue'; const app = createApp(YourRootComponent); app.use(lineClamp);`","cause":"Attempting to use `app.use()` on a raw component instance or an object that is not a Vue application instance created by `createApp()`.","error":"TypeError: app.use is not a function"},{"fix":"Provide a numeric value for the line-height argument, typically corresponding to your text's CSS `line-height` in pixels. Example: `
`.","cause":"The directive argument (e.g., `:20` in `v-line-clamp:20`) for the line-height fallback is not a valid number.","error":"The argument passed to the directive must be a number"},{"fix":"Ensure the plugin is registered via `app.use(lineClamp)`. For TypeScript, you might need to augment Vue's `GlobalComponents` or `Directive` types in a `d.ts` file if the library doesn't provide it automatically.","cause":"TypeScript might not recognize the globally registered directive without proper type augmentation, or the plugin was not registered correctly.","error":"Property 'v-line-clamp' does not exist on type 'VNodeProps' or similar TypeScript error for directive"}],"ecosystem":"npm"}