CSS: Обрезать Текст ✂️

Рассмотрим, как обрезать текст с помощью CSS. Сначала обрежем строку с текстом и добавим многоточие, а затем рассмотрим как обрезать текст по высоте (многострочный текст)

Обрежем текст, если он не помещается в строке.

.crop-line {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

Обрезать текст по высоте (многострочный текст)

Теперь обрежем многострочный текст до нужного количества строк (например, до четырёх).

.crop-height {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
}

Обрезать текст по количеству символов

Для решения данной задачи понадобится JavaScript. Используя код ниже, вы можете выбрать максимальное количество символов и символы на конце обрезки.

`use strict`;

(function () {

    const cropElement = document.querySelectorAll('.crop-text'), // выбор элементов

          size = 120                                             // кол-во символов

          endCharacter = '...';                                  // окончание


    cropElement.forEach(el => {
        let text = el.innerHTML;

        if (el.innerHTML.length > size) {
            text = text.substr(0, size);
            el.innerHTML = text + endCharacter;
        }
    });

}());
Николай
12/10/2019 17:16