Чтобы добавить троеточие в конце текста при переполнении блочного элемента, можно использовать свойство text-overflow в CSS. Следуя этому свойству, вы также можете использовать свойство white-space для управления переносами строк и пробелами в тексте.

Пример:

HTML:

<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet lectus et felis placerat pharetra.</p>

CSS:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

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

Вы также можете задать ширину элемента, чтобы определить, где происходит перенос текста, и где должны появляться троеточия.