CSS: Обрезать Текст ✂️
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. Используя код ниже, вы можете выбрать максимальное количество символов и символы на конце обрезки.
(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;
}
});
}());Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: