в CSS чтобы лишний текст параграфа заканчивался многоточием выходя из блока по горизонтали и как сделать чтобы заканчивался многоточием по вертикали

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

p {
  width: 200px; /* задаем ширину блока */
  white-space: nowrap; /* запрещаем перенос слов */
  overflow: hidden; /* скрываем лишний текст */
  text-overflow: ellipsis; /* добавляем многоточие */
}

Чтобы текст параграфа заканчивался многоточием по вертикали, можно воспользоваться псевдоэлементом ::after и абсолютным позиционированием. Пример:

p {
  position: relative; /* устанавливаем позицию элемента как относительную */
  height: 50px; /* задаем высоту блока */
  overflow: hidden; /* скрываем лишний текст */
}

p::after {
  content: '...'; /* добавляем многоточие */
  position: absolute; /* устанавливаем позицию элемента как абсолютную */
  bottom: 0; /* размещаем элемент внизу блока */
  right: 0; /* размещаем элемент справа блока */
  background: white; /* задаем фон для скрытия текста */
}

Таким образом, лишний текст параграфа будет заканчиваться многоточием как по горизонтали, так и по вертикали.