Обрезка текста и многоточие в конце

Задача: нужно при помощи CSS обрезать текст в конце строки и в конце добавить три точки.

Для примера возьмём вот такой блок:

<div class="demo">
    Это длинная строка которую мы будем укорачивать при помощи CSS.
</div>

и зададим этому блоку стили: высоту и ширину, внутренний отступ и цветной фон чтобы наглядно было ыидно наш блок

.demo {
    width: 200px;
    height: 100px;
    padding: 20px;
    background: #6495ed;
}

У нас получится вот такой блок:

Давайте сначала запретим перенос строк в блоке. Для этого добавим в стили свойство white-space со значением nowrap

Следующим шагом мы скроем текст выступающий за пределы блока. Делается это при помощи overflow: hidden;

Ну и теперь нам осталось только добавить многоточие в конце текста. Добавим к нашим стилям text-overflow: ellipsis; и получим:

В результате CSS будет выглядеть следующим образом:

.demo {
    width: 200px;
    height: 100px;
    padding: 20px;
    background: #6495ed;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

# Несколько строк

Если вам нужно чтобы текст внутри блока был в несколько строк, то это можно сделать при помощи следующих CSS-свойств:

display: -webkit-box;
-webkit-line-clamp: 2; /* количество строк */
-webkit-box-orient: vertical;

Так же я исправлю высоту блока чтобы он был на две строки, изменив height на 77px. В результате блок выглядит вот так:

Вот все стили для блока с двумя строками:

.demo {
    width: 200px;
    height: 77px;
    padding: 20px;
    background: #6495ed;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}