Как распределить текст на несколько строк в зависимости от высоты div и добавить многоточие в конце? ⇐ CSS

[Anonymous]

У меня есть длинный текст, который я хочу отобразить внутри элемента div с фиксированной шириной и высотой.
Я пробовал использовать свойства CSS:

Код: Выделить всё

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

но при этом текст отображается только в одной строке.
Я хочу отображать текст в нескольких строках, которые соответствуют высоте элемента div. и добавьте многоточие в конце, если текст превышает доступное пространство. Я создал CodePen, чтобы продемонстрировать проблему: https://codepen.io/roee030/pen/bGYYjEr
Вот код CSS, который я использую:

Код: Выделить всё

.root {
width: 283px;
font-size: 20px;
height: 283px;
background-color: coral;
}

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

Код: Выделить всё

asdasdasdasdasd

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Я буду признателен за любую помощь или предложения о том, как этого добиться. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/711 ... d-add-an-e