Текст в одну строку и троеточие в конце CSS

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

Все это можно сделать с помощью CSS и замечательного свойства text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — текст который не помещается обрезается.

ellipsis — текст обрезается и в конце мы увидим троеточие.

.block {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
}