Поговорим о том, как обрезать текст выходящий за пределы контейнера с добавлением многоточия ....

Такой метод давно используется для достижения визуальной эстетики и повышения лояльности пользователей при просмотре текста, не умещающегося в пределах выделенного для него блока:

p.intro {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

1. для элемента с текстом указывается явная ширина width,
2. чтобы предотвратить автоматический перенос текста на следующую строку нужно указать свойство white-space: nowrap;,
3. текст, выходящий за пределы блока нужно обрезать overflow: hidden;,
4. конец обрезанной строки дополняется многоточием text-overflow: ellipsis;.

Спасибо за внимание.