Как не обрезать текст в несколько строк если он не вмещается в элемент

Используйте CSS-свойство white-space: nowrap для предотвращения переноса текста, но это может привести к обрезанию. Для многострочного текста без обрезки:

.element {
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
}

Если нужно добавить многоточие для обрезанного текста, но оставить возможность раскрыть его полностью:

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Количество строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate:hover {
  -webkit-line-clamp: unset;
}

Для flex-контейнеров добавьте min-width: 0 дочерним элементам, чтобы текст мог переноситься:

.parent {
  display: flex;
}
.child {
  min-width: 0;
}