Text height crop


Javascript-extension ui.textcrop reduces text height by indicated number of lines. It adds an ellipsis at the end of cropped text and adds the full text to the attribute title.

Block original appearance: After applying the extension:

Connection and use


Connecting at the PHP page


Connecting in JS

import {TextCrop} from 'ui.textcrop';


You must initialize extension in the JS code and 'target' must pass the node which text must to be cropped.

<div data-role="target">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit.

let text = new BX.UI.TextCrop({
    rows: 2,
    target: document.querySelector('[data-role="target"]'),


The parameter rows must pass number of text lines to which you need to crop the text.

The parameter target must pass the element to be cropped.

© «Bitrix24», 2001-2022