Eine Demonstration von text-overflow

HTML

<p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Großhirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p>

CSS

p {
    overflow: hidden;
    text-overflow: ellipsis;
    
    
    width: 250px;
    height: 200px;


    font-size: 14px;
    background: #a20000;
    color: #fff;
    font-weight: bold;
    padding: 20px;
}

JavaScript

/* 
    Ohne die Eigenschaft "white-space: nowrap" funktioniert 
    "text-overflow" nicht. Diese Eigenschaft ist also leider
    nicht dafür geeignet, einen langen Text am Ende eines in
    der Höhe fixierten Containers abzuschneiden. 

    Die Eigenschaft ist dafür gedacht, das Ende der Zeile mit 
    den drei Pünktchen zu sichern.
*/