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

1. Многоточие CSS.
   Один из наиболее распространенных методов обрезки текста — использование многоточия. Этот метод добавляет три точки в конце текста, чтобы указать, что он был усечен. Вот пример того, как этого можно добиться:

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

2. CSS Text-Overflow:
   Подобно методу многоточия, свойство text-overflowможно использовать для обрезки текста и добавления многоточия. Однако для предотвращения переноса текста требуется дополнительное свойство white-space: nowrap. Вот пример:

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

3. CSS Line-Clamp:
   Свойство line-clampпозволяет ограничить количество отображаемых строк и автоматически добавляет многоточие к последней строке, если текст превышает указанный предел. Однако он имеет ограниченную поддержку браузеров. Вот пример:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Specify the number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

4. CSS Clamp():
   Функция clamp() — это мощная функция CSS, позволяющая указать диапазон значений свойства. Это можно использовать для установки максимального количества строк с многоточием. Вот пример:

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: clamp(1, 3, 5); /* Specify the range of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. CSS Word-Wrap:
   Свойство word-wrapможно использовать для разбиения длинных слов и предотвращения их переполнения контейнера. Этот метод полезен, если у вас длинные URL-адреса или строки без пробелов. Вот пример:

.word-wrap {
  word-wrap: break-word;
}

6. CSS Word-Break:
   Подобно word-wrap, свойство word-breakпозволяет вам контролировать, как слова разбиваются, когда они превышают ширину контейнера. Это особенно полезно для языков, отличных от английского, где между словами может не быть пробелов. Вот пример:

.word-break {
  word-break: break-all;
}

7. Обрезка JavaScript.
   Если вам нужен больший контроль над процессом обрезки, вы можете использовать JavaScript для динамической обрезки текста в зависимости от определенных условий. Вот пример:

/* HTML */
<div class="dynamic-trim">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
/* JavaScript */
const element = document.querySelector('.dynamic-trim');
const text = element.textContent;
const trimmedText = text.substring(0, 20) + '...';
element.textContent = trimmedText;

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