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

Многострочный текст не обрезают: `-webkit-line-clamp` (обрезка с многоточием на N строк) или отказ от обрезки — `overflow: visible`, `white-space: normal`, автоматическая высота. Зависит от того, нужно ли ограничение.

Если нужно показать весь текст (не обрезать)

.text {
  overflow: visible;      /* не скрывать */
  white-space: normal;    /* переносить (не nowrap) */
  height: auto;           /* автоматическая высота */
  word-wrap: break-word;  /* переносить длинные слова */
  overflow-wrap: break-word;
}

Убрать всё, что обрезает: overflow: hidden, фиксированную высоту, white-space: nowrap, text-overflow: ellipsis.

Если нужна обрезка на N строк с многоточием

-webkit-line-clamp — многоточие после заданного числа строк:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;        /* максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Частые причины нежелательной обрезки

• white-space: nowrap — текст в одну строку без переноса.
• overflow: hidden + фиксированная высота.
• text-overflow: ellipsis (одна строка).

Перенос длинных слов/URL

.text {
  word-break: break-word;
  overflow-wrap: anywhere; /* переносить длинные строки без пробелов */
}

Коротко для собеседования

Чтобы не обрезать многострочный текст: overflow: visible, white-space: normal (не nowrap), height: auto, overflow-wrap: break-word (переносить длинные слова); убрать overflow: hidden + фиксированную высоту и text-overflow: ellipsis. Если нужна обрезка на N строк с многоточием — -webkit-line-clamp с display: -webkit-box.