<vue-clamp>
Clamping multiline text with ease.
# Features
- Clamps text with max lines and/or max height. No need to specify line height.
- Automatically updates upon layout change.
- The clamped text can be expanded/collapsed.
- Customizable and responsive content before/after clamped text.
- Place elllipsis at the end, middle, or the start of the clamped text.
# Demo
Clamped: Yes
# Usage
$ npm i --save vue-clamp<template>
<v-clamp autoresize :max-lines="3">{{ text }}</v-clamp>
</template>
<script>
import VClamp from 'vue-clamp'
export default {
components: {
VClamp
},
data () {
return {
text: 'Some very very long text content.'
}
}
}
</script>
# API
tag: stringThe tag name of the generated root element.
Default:
divautoresize: booleanWhether to observe the root element's size.
Default:
falsemax-lines: numberThe max number of lines that can be displayed.
max-height: number | stringThe max height of the root element. Number values are converted to
pxunits. String values are used directly as themax-heightCSS property.ellipsis: stringThe ellipsis characters displayed when the text is clamped.
Default:
'…'location: 'start' | 'middle' | 'end'The location of the ellipsis.
Default:
'end'expanded: boolean.sync
Whether the clamped area is expanded.
Default:
false
defaultThe text to clamp. Can only contain pure text.
beforeSlot scope:
{ expand, collapse, toggle, clamped, expanded }expand: function(): void- Expand the clamped text.collapse: function(): void- Collapse the expanded text.toggle: function(): void- Toggle the expand state of clamped text.clamped: Boolean- Whether text content is being clamped.expanded: Boolean- Whether text content is being expanded.Content displayed before the clamped text. Can contain anything.
afterSlot scope: Same as
before.Content displayed after the clamped text. Can contain anything.
clampchangeEmitted when clamp state changes.
Callback parameter list:
(clamped: Boolean)