CSS: Как заставить текст вписываться в одну строку

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

white-space: nowrap; — запрещает перенос текста на новую строку.
overflow: hidden; — скрывает текст, выходящий за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце текста, если он не помещается.

Эти свойства работают совместно, чтобы добиться желаемого эффекта.

Пример

ВыделитьCSS

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

ВыделитьHTML

<div class="text-container">
    Очень длинный текст, который не поместится в одну строку и должен обрываться многоточием.
</div>

Как это работает

white-space: nowrap; — запрещает тексту переноситься на новую строку, что позволяет нам видеть весь текст в одну строку.
overflow: hidden; — скрывает часть текста, выходящую за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце строки, если текст не помещается.

Важные моменты

Для корректной работы этих свойств необходимо задать фиксированную ширину блоку.
Без свойства overflow: hidden; многоточие не появится.
Многоточие добавляется только в конце последней строки, если текст не помещается.

Используя комбинации трёх свойств CSS, можно легко и эффективно ограничивать текст в одну строку, избегая выхода за пределы блока и придавая дизайну аккуратный вид.