Line Clamp

• About
• Initialization
• JS Usage

About

Line Clamp — is a js component to create expandable (“Show more…”) sections with html content.

View Source Code

Initialization

Use the following wrapper around your html content:

<div class="line-clamp-[1..6]" data-mage-init='{"lineClamp":{}}'>
    ...
</div>

JS Usage

If you already have a wrapper around the content but you can’t modify it you can use js and css code:

$(document).on('breeze:load', () => {
    $('.selector').lineClamp();
});

.selector {
    &:extend(.line-clamp-3);
}