Zeilenbeschränkung (Mehrzeiligen Text abschneiden)

Sie wünschen sich X Zeilen Text. Alles danach wird: anmutig abgeschnitten. Das ist „Zeilenbeschränkung“ und ein absolut legitimer Wunsch. Wenn Sie die Anzahl der Textzeilen genau kennen, können Sie stärkere und zuverlässigere Raster aus den Elementen erstellen, die diesen Text enthalten, und gleichzeitig eine symmetrische ästhetische Harmonie erreichen.

Dafür gibt es ein paar Möglichkeiten, keine davon ist spektakulär.

Falls diese Erklärung nicht klar war, stellen Sie sich vor, Sie haben HTML wie dieses

<div class="module">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Und Sie möchten es auf genau drei Zeilen in einem Container begrenzen. So:

In all diesen Beispielen gehen wir von einem „Modul“ aus.

.module {
  width: 250px;
  overflow: hidden;
}

Der standardisierte Weg

Früher nannte ich das „der seltsame WebKit-Flexbox-Weg“, aber in einer besonders seltsamen Wendung beinhaltet die Spezifikation dies nun als Teil des Overflow-Moduls, inklusive der alten Flexbox. Und Firefox hat es genau so implementiert. Und mit Edge-gone-Chromium ist diese seltsame Technik viel nützlicher geworden statt weniger.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

Trotz der seltsamen Syntax ist das großartig und genau das, was wir brauchen. Hier ist ein Spielplatz, um damit herumzuspielen

Um fair zu sein, es ist wirklich seltsam. Warum muss es eine Flexbox-Sache sein (die alte Version)? Ohne das funktioniert es nicht. Und es ist extrem fehleranfällig. Nehmen wir an, Sie möchten, dass das Modul (oder der Absatz) etwas Polsterung hat. Das können Sie nicht, denn die Polsterung würde zusätzliche Zeilen freilegen. Das bekommen wir mit halbfertigen, ursprünglich nicht standardisierten Eigenschaften.

Die Ausblendmethode

Der Kern dieser Technik ist einfach, die Höhe des Moduls auf vorhersagbare Weise festzulegen. Nehmen wir an, Sie setzen line-height auf 1.2em. Wenn wir drei Textzeilen anzeigen möchten, können wir einfach die Höhe des Containers auf 3.6em (1.2em × 3) setzen. Der versteckte Überlauf wird den Rest ausblenden.

Aber es kann etwas ungeschickt sein, den Text einfach so abzuschneiden. Idealerweise würden wir Ellipsen hinzufügen, aber wir können sie nicht zuverlässig positionieren. Stattdessen blenden wir den Text aus und erreichen so die gleiche Art der Kommunikation („da ist mehr…“).

Um die letzte Zeile auszublenden, erstellen wir eine Box (ein Pseudo-Element eignet sich hervorragend) und überlagern einen transparenten zu Hintergrundfarbe verlaufenden Farbverlauf. Ihn fast so breit wie der Container zu machen, ist am besten, falls die letzte Zeile kurz ist. Da wir die line-height kennen, können wir das Pseudo-Element genau eine Zeile hoch machen.

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade::after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Der Opera Overflow Weg

Opera als eigene Rendering-Engine ist seit langem defekt. Ich lasse das nur aus historischen Gründen drin.

Wie WebKit hat Opera seine eigene Methode, dies zu handhaben. Sie wenden Ellipsen auf die gewünschte Zeile an. Natürlich tickt die Uhr für Presto (Operas Rendering-Engine vor Blink), daher ist das nicht besonders nützlich. Vielleicht kann es aber trotzdem eine zukünftige Implementierung beeinflussen.

.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}

Der Clamp.js Weg

Wo ein Wille ist, ist auch ein Weg (mit JavaScript). Ich glaube, das ist ein Sprichwort. Joseph J. Schmitt hat eine ausgezeichnete, bibliotheksfreie JavaScript-Lösung namens Clamp.js, um dies browserübergreifend zu realisieren.

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

Stellen Sie sicher, dass Sie das Element mit dem Text direkt ansprechen. Ursprünglich habe ich versucht, die ID auf das Modul zu setzen, was in Chrome/Safari funktionierte, aber in Firefox fehlschlug. Das Setzen auf die <p>-Tags funktionierte in beiden (Thx Merri).

Die reine CSS-Methode mit verstecktem Überlauf und platzierten Ellipsen

Der Trick besteht darin, eine max-height festzulegen, die der maximalen Anzahl von Zeilen multipliziert mit der line-height entspricht.

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  inset-block-end: 0; /* "bottom" */
  inset-inline-end: 0; /* "right" */
}
.truncate-overflow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0; /* "right" */
  width: 1rem;
  height: 1rem;
  background: white;
}

Der Rest besteht darin, am Ende der Zeilen einen „…“-Ellipsen-Punkt zu platzieren, aber *nur*, wenn der Text die maximale Anzahl von Zeilen überschreitet.

Die Demos

Update: Weitere gute Wege!

• Es gibt eine außergewöhnlich clevere reine CSS-Methode dafür, die im Mobify-Blog veröffentlicht wurde Update: Link entfernt, toter Blog, Technik hier eingefügt.
• Vesa Piittinen hat eine alternative Methode zu Clamp.js erstellt.
  „Im Gegensatz zu Clamp.js behält sie den gesamten Text innerhalb des begrenzten Elements und nutzt text-overflow für die Magie.“
• FT Labs hat ebenfalls ein JavaScript-Plugin entwickelt, um die Aufgabe zu erledigen. Es ist gut, da Sie die Anzahl der Zeilen nicht angeben müssen, es passiert einfach, wenn der Text den Container überläuft, sodass die Designentscheidungen im CSS verbleiben.
• Succinct: „Ein winziges jQuery-Plugin zum Abschneiden von mehrzeiligem Text.“

Diese Beispiele wurden zum Haupt-Pen hinzugefügt.

Es gibt auch Shave von DollarShaveClub