Multiline Ellipsis mittels Javascript

Mit CSS3 wurde eine weitere großartige Möglichkeit seitens CSS geschaffen, Texte leicht, einfach und schnell zu kürzen. Jedoch stellte sich mir die Frage, ob die CSS-Eigenschaft auch zum Kürzen von mehrzeiligen Texten genutzt werden kann.

Leider lässt sich diese Frage nach meinem Wissensstand nur mit einem klaren Nein beantworten. Wie ich es auch versucht habe, es war mir nicht möglich mehrzeilige Texte mit den überall präsenten "..." abzuschneiden. Nach einer kleinen Suche im Web nach diversen Tricks, um dies doch zu ermöglichen, bin ich oft auf die gleiche Antwort gestoßen. Entweder nur einzeilige Texte abschneiden oder selbst kürzen.

Abhilfe schafft ein kleines JavaScript-Tool, genannt dotdotdot. Also habe ich die JavaScript-Datei von der Homepage bezogen und die Sourcen kurzerhand eingebunden. Folgend möchte ich die einfachste Anwendung des nützlichen Tools kurz erläutern. Das Einbinden und Anwenden lässt sich wie folgt vornehmen.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- DotDotDot -->
<script src="js/jquery.dotdotdot-1.5.6-packed.js"></script>

Folgend ein kleines Stück Beispielcode:

<div id="wrapper">
	<p class="dotdotdot">Lorem Ipsum is simply dummy text.</p>
</div>

Das Kürzen des Textes in der einfachsten Form und mit Default-Einstellungen wird anschließend durch folgende Script-Zeilen realisiert.

$(document).ready(function() {
	$("#wrapper p.dotdotdot").dotdotdot();
});

Das fertige Ergebnis sieht dann wie folgt aus.

Es ist also von Nöten, dass für das zu kürzende Element eine maximale Höhe und Breite festgelegt wird. Anschließend übernimmt das JavaScript die Kürzung auf die optimale Länge, so dass diese Höhe nicht überschritten wird und der Text entsprechend abgekürzt wird.

Neben dem parameterlosen Aufruf der dotdotdot()-Methode, können auch noch diverse Eigenschaften festgelegt werden. So kann nach einem Wort oder einfach nach einem Buchstaben abgeschnitten werden. Die Zeichen, welche an den abgeschnittenen Text angehangen werden sollen (Default: “…”) können ebenfalls definiert werden. Weiterhin lässt sich der Original-Zustand und Originalinhalt jederzeit wiederherstellen. Näheres dazu auf der offiziellen Homepage.