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

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

Описание

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-2024, «1С-Битрикс», 2024