Wie verteilt man Text basierend auf der Höhe eines Divs auf mehrere Zeilen und fügt am Ende Auslassungspunkte hinzu? ⇐ CSS

[Guest]

Ich habe einen langen Text, den ich in einem Div mit fester Breite und Höhe anzeigen möchte.
Ich habe versucht, die CSS-Eigenschaften zu verwenden:

Code: Select all

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

aber dadurch wird der Text nur in einer einzelnen Zeile angezeigt.
Ich möchte den Text in mehreren Zeilen anzeigen, die in die Höhe des Div passen und fügen Sie am Ende Auslassungspunkte hinzu, wenn der Text den verfügbaren Platz überschreitet. Ich habe einen CodePen erstellt, um das Problem zu veranschaulichen: https://codepen.io/roee030/pen/bGYYjEr
Hier ist der CSS-Code, den ich verwende:

Code: Select all

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

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

Code: Select all

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.

Ich würde mich über jede Hilfe oder Vorschläge freuen, wie dies erreicht werden kann. Vielen Dank.