cutshort

CutShort...

Table of Contents

1. Install
2. Introduction
3. Usage
4. Options
5. Methods
6. Supported browsers
7. Development

Install

Install with npm:

npm install cutshort

Install with yarn:

yarn add cutshort

Introduction

CutShort is a libary that makes multiline oveflow easy.

If your browser supports css line-clamp, CutShort will automaticly try to fallback into it.

Usage

<span class="cut-short">Lorem ipsum...</span>

Now as you created element you want to use CutShort on you have 2 ways to initialize it:

import {CutShortFactory} from 'cutshort';

new CutShortFactory('.cut-short');

or

import {CutShort} from 'cutshort';

new CutShort(document.querySelector('.cut-short'));

After you initalized CutShort it is possible to access the CutShort's instance on its HTMLElement. It is cutShort property of CutShort's HTML element:

const myCutShort = document.querySelector('.cutShort').cutShort;

// Now you can use all cutShort methods like
myCutShort.destroy();

DISCLAMER: Don't use CutShort and CutShortFactory with quering that could target the same element. Trying to initalize CutShort on the same element twice will result in errors.

Options

All options can be passes as attributes on the element. Attributes have higher priority over options.

lines {Number?}

Maximum amount of lines that will be displayed inside CutShort container.

Default: 1

Attribute: cut-short-lines

breakpoints {{[key: Number]: Number}}

Allows to set different amount of displayed lines for different responsive breakpoints (screen sizes). For example:

{
    // when window width is >= 0px
    0: lines, // Added automatically, no need to provide.
    
    // when window width is >= 576px
    578: 2,
    
    // when window width is >= 768px
    768: 3
    
    // when window width is >= 992px
    992: 1
}

Default: {0: lines}

Attribute: cut-short-breakpoints (accepts only valid json format, in case of invalid json, error message is thrown)

Methods

excerpt(): Void

Exerpt the content of the element CutShort got initialized on.

destroy(): Void

Destroy the current instance of CutShort

get content: String

Get full not excerpt content of the element CutShort got initialized on.

get options: {lines: Number, breakpoints: {[key: Number]: Number}}

Get options of current CutShort instance.

set content(value: String)

Set new content inside element with CutShort instance.

set options(value: {lines?: Number, breakpoints?: {[key: Number]: Number}})

Set new options for current instance of CutShort.

Supported Browsers

As long browser you want to support has support for mutationObserver and Set (part of ES6) you are good to go. In other way you need to install appropriate polyfills.

Development

This project uses webpack 4 to compile typescript into javascript. Run npm run watch in terminal start a watch on typescript files and build everything after saving your changes.