vue-line-clamp
Advanced tools
A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.
A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.
npm install --save vue-line-clamp
import Vue from 'vue'
import lineClamp from 'vue-line-clamp'
Vue.use(lineClamp, {
// plugin options
})
<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.
| property | type | default | description |
|---|---|---|---|
| importCss | Boolean | false | Set to true in order to import styles into <head> automatically, element.style is used by default |
| textOverflow | String | ellipsis | Set the value for text-overflow property in modern browsers |
| fallbackFunc | Function | defaultFallbackFunc | Provide your own default method to handle the truncation strategy on unsupported browsers. Accepts all directive params: element (Node), bindings (Object), lines (Number) |
...) since we can't control the part of the text node that may get "clamped".v1.2.4 - Implemented textOverflow option.
v1.2.1 - Implemented fallbackFunc options, fixed multiple elements clamping on same page.
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.
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.
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.
Research
Security News
A malicious Maven package typosquatting a popular library is secretly stealing OAuth credentials on the 15th of each month, putting Java developers at risk.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.