Обрезка текста для одной единственной строки

Когда мы хотим, чтобы наш текст был на одной линии (на прямой линии). Мы можем добиться этого, установив свойство white-space на значение nowrap. Если текст длинный, а ширина контейнера например 300px, тогда текст будет просто выходить за пределы контейнера, хоть и по прежнему будет в одну строку.

Чтобы его обрезать можно использовать следующие свойства:

.truncated-text {
  width: 300px;
  overflow: hidden; // скрывает все что выходит за зону контейнера
  text-overflow: ellipsis; // заменяет скрытый текст на многоточие 
  white-space: nowrap; // текст в одну строку
}

- Обрезка текста для блока с несколькими строками: пост

➡️ @FrontendPortal | #CSS