Как обрезать текст на CSS: техники и примеры

В процессе верстки блоков контента часто требуется соответствие внешнего интерфейса дизайну макета сайта. Это часто касается заголовков и описания внешнего вида карточек товара в категориях, при выводе популярных записей, ссылочными блоками на услуги и прочего. Обрезка текста CSS — наиболее популярный способ управлять отображением текста, используя правила CSS можно просто оформить блок текста при его переполнении. Давайте посмотрим как можно обрезать текст на css с помощью таких свойств как text-overflow и line-clamp, в придачу посмотрим как то же можно сделать при помощи JavaScript, и с помощью функций PHP.

Обрезка текста CSS: основные способы

Чтобы обрезать текст на css используются несколько популярных свойств — от простой обрезки одной строки, что обычно применяют для заголовков и для управлением высотой многострочного текста при выводе краткого описания или частично скрытого блока с контентом.

Обрезка одной строки текста

Самый простой способ обрезать текст в одну строку — использовать свойство overflow: hidden. Так можно обрезать текст который выходит за заданую ширину блока.

Пример:

// HTML:

<div class="simple-line">Длинный текст, который будет обрезан после 200 пикселей.</div>

// CSS:

.simple-line {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

Обрезка одной строки текста с многоточием

Чтобы пользователь понял что текст показан не весь, можно добавить многоточие в конце обрезанного текста с помощью свойства text-overflow: ellipsis. Это популярный метод для заголовков, описаний, длинных ссылок или подписей.

// HTML:

<div class="single-line-ellipsis">Длинный текст, который обрезается с многоточием в конце.</div>

// CSS:

.single-line-ellipsis {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Так мы даем понять о наличии дополнительного контента.

Обрезка текста css: несколько строк

Чтобы обрезать текст на нужное количество строк используется свойство -webkit-line-clamp. В нем мы указываем число нужных строк, и это свойство само добавит уже многоточие (здесь text-overflow: ellipsis указываеть уже не нужно). Очень полезный метод, если нужно выровнять блоки с анонсами записей по высоте.

// css
.multi-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

// html
<div class="multi-line">Вывод многострочного текста, который занимает больше трёх строк и должен быть обрезан с многоточием в конце, для уведомления о скрытом контенте.</div>

Другие варианты обрезки текста в CSS

Иногда может потребоваться обрезать текст без многоточия, чтобы добавить свои стили оформления или добавить визуальный эффект на javascript. В таком случае, можно скрыть текст с помощью overflow: hidden и задать фиксированную высоту контейнера.

// css
.trim-text {
    width: 200px;
    height: 40px;
    overflow: hidden;
}

// html
<div class="trim-text">Текст с фиксированной высотой, который обрезается без многоточия.</div>

Обрезка текста в WordPress

В WordPress обрезку текста часто используют для заголовков или выдержкам из записей. Например, чтобы обрезать заголовок, выводимый через the_title(), можно использовать следующую функцию на PHP.

// php
function trim_title_words($count, $after) {
    $title = get_the_title();
    $words = explode(' ', $title);
    if (count($words) > $count) {
        array_splice($words, $count);
        $title = implode(' ', $words);
    } else {
        $after = '';
    }
    echo $title . $after;
}

Это позволит прямо в шаблоне задать количество выводимых слов и указать символы в качестве прерывания в следующем виде:

<?php trim_title_words(5, '...'); ?>

Обрезка текста с помощью JavaScript

Для управления обрезкой текста можно также использовать и JavaScript. Следуящая реализация позволяет обрезать текст по количеству символов и добавлять многоточие вручную.

// html
<div class="text-to-trim">Очень длинный текст, который обрежем до нужного количества символов с помощью JavaScript.</div>

// javascript
function trimText(element, maxLength) {
    let text = element.innerText;
    if (text.length > maxLength) {
        element.innerText = text.slice(0, maxLength) + '...';
    }
}

// Пример использования
let textElement = document.querySelector('.text-to-trim');
trimText(textElement, 20);

Здесь мы обрезаем текст до 20 символов и добавляем троеточие в конце.

Заключение

text-overflow для одной строки
line-clamp для нескольких строк
overflow: hidden — по границам контейнера
trim_title_words() — для использования при выводе в шаблоне в wordpress
trimText(textElement, 20) — для большей гибкости с помощью JS
Выбор способа зависит от целей: соответствие дизайну, оптимизация для девайсов или управление сложным выводом контента.

Не пропустите эти статьи

Анимация details: два подхода на CSS и JavaScript

С помощью элемента details в HTML удобно реализовать раскрывающиеся блоки, такие как FAQ или аккордеоны.…

Emmet в VS Code для HTML

Emmet — это бесплатный инструмент, напоминающий авто подстановку слов в вашем телефоне, позволяющий значительно ускорить…

Как использовать псевдоэлементы с элементами input after и before

.Псевдоэлементы ::before и ::after часто используют для декорации элементов в html тегах, чтобы избежать нагромождения…

Условия cookie на сайте: как создать всплывающее окно с предупреждением

Как создать всплывающее окно о cookie на сайте с помощью JavaScript и соблюсти GDPR.