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
;
Add it to use
array for stylus
That's all! Now you are ready to use line-clamping.styl
API
line-clamping
mixin takes 1 argument:
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 { 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 { 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