Веб-разработка включает множество приемов и методов для улучшения пользовательского интерфейса. Один из таких приемов — усечение текста. Усечение текста позволяет отображать ограниченное количество текста, завершая его многоточием, если он превышает установленную длину. В этой статье мы рассмотрим, как воссоздать эффект усеченного текста, используемый на MDN (Mozilla Developer Network), с помощью CSS.

Основные понятия

Усечение текста — это техника, которая используется для ограничения отображаемого текста до определенного числа строк или символов. Если текст превышает это количество, он усечен, и в конце добавляется многоточие (…).

Усечение текста полезно в различных сценариях, таких как:

• Отображение кратких анонсов статей.
• Предотвращение переполнения текстовых блоков.
• Улучшение эстетики и читаемости страницы.

Реализация эффекта усеченного текста

ОНЛАЙН-ПРАКТИКУМ

КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
• Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
• Что ждет рынок программирования и почему мы решили сюда пойти

Участвовать бесплатно

Для усечения текста в одной строке и добавления многоточия можно использовать CSS-свойства overflow, white-space и text-overflow. Рассмотрим этот метод на примере.

Пример:

HTML:

<div class="truncate-one-line">

Это пример текста, который будет усечен в одну строку с добавлением многоточия в конце.

</div>

CSS:

.truncate-one-line {

width: 200px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

Усечение текста в нескольких строках

Для усечения текста в нескольких строках потребуется немного более сложный подход с использованием свойств display, -webkit-line-clamp и -webkit-box.

Пример:

HTML:

<div class="truncate-multiple-lines">

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

</div>

CSS:

.truncate-multiple-lines {

display: -webkit-box;

-webkit-line-clamp: 3; /* количество строк */

-webkit-box-orient: vertical;

overflow: hidden;

}

Поддержка кросс-браузерности

Несмотря на то, что описанные методы хорошо работают в большинстве современных браузеров, важно учитывать кросс-браузерную совместимость. Свойства -webkit-line-clamp и -webkit-box-orient поддерживаются только в браузерах на основе WebKit. Для других браузеров можно использовать альтернативные подходы, такие как JavaScript.

Пример JavaScript:

HTML:

<div id="truncate-js">

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

</div>

JS:

function truncateText(element, lines) {

const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);

const maxHeight = lineHeight * lines;

element.style.maxHeight = `${maxHeight}px`;

element.style.overflow = 'hidden';

}

const element = document.getElementById('truncate-js');

truncateText(element, 3);

Примеры использования усечения текста

• Карточки с превью статей

Карточки с превью статей часто используют усечение текста для отображения краткого содержания.

<div class="card">

<h3>Заголовок статьи</h3>

<p class="truncate-multiple-lines">

Это пример текста, который будет усечен до нескольких строк. Этот метод полезен для более длинных текстов, отображаемых на карточках.

</p>

</div>

• Элементы списка

Усечение текста также может использоваться для элементов списка, чтобы обеспечить их компактность.

<ul>

<li class="truncate-one-line">Первый длинный элемент списка, который будет усечен.</li>

<li class="truncate-one-line">Второй длинный элемент списка, который также будет усечен.</li>

</ul>

Таблица свойств CSS для усечения текста

Заключение

Усечение текста — важный прием в веб-разработке, который помогает улучшить внешний вид и удобство использования веб-страниц. С помощью CSS и JavaScript можно эффективно управлять отображением текста, обеспечивая его лаконичность и читабельность. При разработке важно учитывать кросс-браузерную совместимость и использовать соответствующие методы для достижения наилучших результатов.