1. Многострочное обрезание с добавлением "…" (CSS line-clamp)
Если цель — ограничить текст по высоте/количеству строк, используйте современное свойство -webkit-line-clamp:
.text-block { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* Ограничить 3 строками */ overflow: hidden; text-overflow: ellipsis; }
2. Обрезка в одну строку (классический метод)
Для однострочного текста:
.single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; /* Или фиксированная ширина */ }
3. JavaScript + CSS: Обрезка по символам
Если критично именно количество символов (например, 2000), используйте JavaScript:
<p class="truncate-text">Очень длинный текст...</p>
.truncate-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('.truncate-text'); elements.forEach(element => { const text = element.textContent; if (text.length > 2000) { element.textContent = text.slice(0, 2000) + '…'; } }); });
4. Серверное/шаблонное решение
Если текст генерируется на бэкенде или в шаблоне, обрежьте его до отправки клиенту (пример для PHP):
<?php
$text = "Очень длинный текст...";
$trimmed_text = (strlen($text) > 2000) ? substr($text, 0, 2000) . '…' : $text;
echo '<p>' . $trimmed_text . '</p>';
?>
Почему нельзя на чистом CSS?
CSS не имеет свойств для подсчёта символов. Свойства вроде text-overflow: ellipsis работают с визуальным переполнением, а не с фактической длиной текста.