"Cross browser" solution for the poorly supported `-webkit-line-clamp` css property regarding to multi-line text truncation
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.