Для обрезки текста в CSS можно использовать свойство text-overflow
.
Пример:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Здесь overflow: hidden
скрывает все, что выходит за границы блока, text-overflow: ellipsis
добавляет многоточие в конце обрезанного текста, а white-space: nowrap
запрещает переносить текст на новую строку.
Таким образом, если текст не помещается в блок, он будет обрезан и заменен многоточием.