Security News
ESLint Adds Official Support for Linting HTML
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
By Sarah Gooding - May 13, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
vue-line-clamp
Advanced tools
vue-line-clamp
A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.
Vue Line Clamp
A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.
Demo: https://codepen.io/Frondor/pen/ypvPEQ
Install
npm install --save vue-line-clamp
import Vue from 'vue'
import lineClamp from 'vue-line-clamp'
Vue.use(lineClamp, {
// plugin options
})
Usage
<p v-line-clamp:20="2">Some long text that needs to be truncated to a fixed number, which is 2 in this case. And if the browser doesn't support `-webkit-line-clamp`, then a line-height of 20px is going to be used in order to truncate this text, thus calculating its max-height.</p>
NOTE: the argument passed to the directive must be a number, and its used as the line-height value for non-webkit browsers, as part of the fallback method.
In some upcoming version it may be able to detect this value automatically.
Plugin options
| property | type | default | description |
|---|---|---|---|
| importCss | Boolean | false | Set to true in order to import styles into <head> automatically, element.style is used by default |
Caveats
Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find.
Changelog
v1.2 - Lines parameter passed to v-line-clamp is now reactive.
FAQs
A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.
The npm package vue-line-clamp receives a total of 4,114 weekly downloads. As such, vue-line-clamp popularity was classified as popular.
We found that vue-line-clamp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 03 Feb 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
CISA Kills Off RSS Feeds for KEVs and Cyber Alerts
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.
By Sarah Gooding - May 12, 2025
Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
By Sarah Gooding - May 09, 2025