Документация для разработчиков
Темная тема

Сокращение текста по высоте

Описание

Javascript-расширение ui.textcrop осуществляет сокращение текста по высоте по заданному количеству строк. При сокращении подставляется троеточие в конце обрезанного текста и добавляется полный текст в атрибут title.

Исходный вид блока: После применения экстеншена:

Подключение и использование

Подключение

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load('ui.textcrop');

Подключение в jS

import {TextCrop} from 'ui.textcrop';

Использование

В js-коде необходимо инициализировать расширение и в target передать ноду, для которой нужно выполнить сокращение текста.

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

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

text.init();

В параметр rows необходимо передать количество строк, до которых хотите сократить текст.

В параметр target необходимо передать элемент который необходимо обрезать.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх