05 Апр
Обрезать текст на CSS может быть необходимо, когда вы хотите ограничить количество текста в элементе. В этой статье я расскажу о нескольких методах обрезки текста с использованием CSS. Прежде чем перейти к конкретному решению, я хочу, чтобы вы поняли следующие свойства:
white-space:
Это свойство является обработчиком текста в блоке. Простыми словами, когда вы помещаете текст в любой контейнер, настройка текста в этом конкретном пространстве зависит от его ширины. Если ширина блока составляет 300px, а вы добавляете в него текст, текст будет автоматически переноситься на новую строку в зависимости от доступного пространства.
По умолчанию свойство white-space блока установлено на normal. Таким образом, каждый текст, который превышает лимит в 300px, автоматически переносится на новую строку.
Существует несколько различных значений, которые можно использовать:
white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: break-spaces;white-space: nowrap;
text-overflow:
Это свойство поможет нам в работе с текстом который скрыт. Например чтобы заменить скрытый текст на многоточие, воспользуемся text-overflow: ellipsis;
Обратите внимание, что это свойство не будет работать, если у блока, в который вы помещаете текст, нет свойств white-space и overflow: hidden.
Обрезка текста для одной единственной строки
Когда мы хотим, чтобы наш текст был на одной линии (на прямой линии). Мы можем добиться этого, установив свойство white-space на значение nowrap. Если текст длинный, а ширина контейнера например 300px, тогда текст будет просто выходить за пределы контейнера, хоть и по прежнему будет в одну строку. Чтобы его обрезать можно использовать следующие свойства:
p {
font-size:1rem;
width:300px;
/* Обрезка текста */
white-space: nowrap; // текст в одну строку
overflow: hidden; // скрывает все что выходит за зону контейнера
text-overflow: ellipsis; // заменяет скрытый текст на многоточие
}Обрезка текста для блока с несколькими строками
Перейдем к более сложному варианту, где нужно обрезать текст на нескольких строках. Здесь нам потребуется указать высоту блока или элемента, но вот здесь нас поджидает некоторая тонкость.
Сначала необходимо посчитать количество строк, которые нужно отобразить, а затем умножить это число на значение свойства line-height, чтобы получить максимальную высоту блока. Например наш line-height равен 2rem, тогда если мы хотим показать 4 строки, наша максимальная высота будет 8rem.
max-height: calc(line-height * количество строк);
Теперь нам необходимо установить свойство display в значение -webkit-box, чтобы включить многоколоночный режим и применить свойство -webkit-line-clamp, чтобы указать количество строк, которые мы хотим отображать. Данный код покажет первые 4 строки, а весь оставшийся текст заменит на многоточье:
p {
font-size: 1rem;
width:300px;
/* Обрезка текста */
line-height: 2rem;
max-height: 8rem;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
overflow: hidden!important;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
}Заключение:
В обоих вариантах мы смогли решить проблему обрезки текста при помощи CSS. Если вам нужно обрезать текст на одной строке, то вы можете использовать свойства white-space: nowrap;, overflow: hidden; и text-overflow: ellipsis;. Если же вам нужно обрезать текст на нескольких строках, то используйте свойства max-height, overflow, text-overflow, -webkit-line-clamp и др.
Важно понимать, что использование этих свойств может повлиять на внешний вид вашего сайта и на восприятие пользователем. Поэтому, прежде чем использовать обрезку текста на CSS, тщательно продумайте, как она будет выглядеть на вашем сайте.
Надеюсь, что данная статья помогла вам разобраться в тонкостях обрезки текста на CSS и вы сможете успешно применить это знание в своих проектах.
Александр Сокирка
