Ограничение количеств строк текста и символов css

1. Использование line-clamp (для многострочного обрезания)

.limited-text {
display: -webkit-box;
-webkit-line-clamp: 3; /* Ограничение до 3 строк */
-webkit-box-orient: vertical;
overflow: hidden;
}

Поддерживается в современных браузерах, но требует display: -webkit-box.

2. Использование overflow и text-overflow (для однострочного обрезания)

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

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

3. Использование max-height и overflow: hidden (жёсткое ограничение по высоте)

.fixed-height {
max-height: 4.5em; /* Для 3 строк при размере шрифта 1.5em */
overflow: hidden;
}