line-clamping.styl

Stylus mixin for clamping multiline text

Get started

Installation

You can install line-clamping.styl using npm

npm i line-clamping.styl --save-dev

or you can use yarn

yarn add line-clamping.styl --dev

Importing

Using gulp

Import the installed package from node_modules

import lineClamping from 'line-clamping.styl';

Add it to use array for stylus

stylus({
    use: [lineClamping()],
})

That's all! Now you are ready to use line-clamping.styl

API

line-clamping mixin takes 1 argument:

line-clamping(options: I-line-clamping|number)

Available options

interface I-line-clamping {
    lines: number, 
    line-height?: css unit, 
    font-size?: css unit, 
    is-inline?: boolean
}

For example, if you need to create block .block that should have two lines of the text, line-height: 2 and font-size: 20px then the code will be following:

.block
    line-clamping({
        lines: 2, 
        line-height: 2, 
        font-size: 20px,
    })

If you want to use is-inline mode you must set width property for the element.

.inline-block
    width 200px
    line-clamping({
        lines: 2, 
        line-height: 2, 
        font-size: 20px,
        is-inline: true
    })

You can find more examples of usage line-clamping() in test folder

Testing

First of all you need to install the dependencies:

yarn

After installation run following command:

yarn test