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

Sylvenas/multi-clamp