Repository files navigation

Stylus mixin for clamping multiline text

You can installline-clamping.styl usingnpm

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

or you can useyarn

yarn add line-clamping.styl --dev

Import the installed package fromnode_modules

importlineClampingfrom'line-clamping.styl';

Add it touse array for stylus

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

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

line-clamping mixin takes 1 argument:

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

Available options

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

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

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

If you want to useis-inline mode you must setwidth property for the element.

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

You can find more examples of usageline-clamping() intest folder

First of all you need to install the dependencies:

yarn

After installation run following command:

yarntest