multi-clamp

Simple, efficient and easy-to-use multiline text clamp module. (supports reverse clamp)

For React? See react-multi-clamp

Samples

• Default multiline text clamp:

• Custom ellipsis:

• Reverse clamp:

Demo Page

Browser compatibility

Supports IE8+ / Android4+ / IOS6+ / etc. Almost all of the common browsers on PC / mobile device.

Installation

You can install multi-clamp from npm:

npm install multi-clamp --save

Usage

Import multi-clamp.

import MultiClamp from 'multi-clamp';

Or use MultiClamp.min.js in browser directly.

<script src="./MultiClamp.min.js"></script>

Just new the multi-clamp constructor.

<div id="textContainer">...much...long...text...</div>

<script>
new MultiClamp(document.getElementById('textContainer'), {
  ellipsis: '...',
  clamp: 3
});
</script>

Options

ellipsis: string || element

Ellipsis can be simple string, HTML string or element object. default: '...'

clamp: number || 'auto'

The max number of lines to show. It will try to fill up the available space when set to string 'auto', and at this point you should set a static height on the text container element. default: 3

reverse: boolean

You can clamp the content from back to front, the ellipsis will be in the front. default: false

splitByWords: boolean

The default behavior is to split by letters. If you want to split by words, set splitByWords to true. default: false

disableCssClamp: boolean

Multi-clamp will use native css clamp(-webkit-line-clamp) in supported browser when the ellipsis is set to '...'. If you don't want to use css clamp, set disableCssClamp to true. default: false

onClampStart: function({ needClamp: boolean }): void || false v1.1.0+

This callback function will be executed when clamp starts, and will not be executed when use native css clamp. Clamp will be prevented when return value is false. default: function() {}

onClampEnd: function({ didClamp: boolean }): void v1.1.0+

This callback function will be executed when clamp ends, and will not be executed when use native css clamp. default: function() {}

Instance method

reload()

Call this method to re-clamp when the text content or style changes

reload(options) v2.0.0+

You can change initial options when reloading through the options param, and use the original text to re-clamp when options.useOriginalText set to true. default: { ...initOptions, useOriginalText: false }

Changelog

v2.0.2

• Bugfix when passing element object to option ellipsis. react-multi-clamp#3

v2.0.1

• Bugfix. #6

v2.0.0

• Support change initial options and use the original text to re-clamp. #2
• Refactoring. #3

v1.1.0

• Add onClampStart and onClampEnd callback functions. react-multi-clamp#2

v1.0.3

• Bugfix. #1

License

MIT