text-align-last: Die letzte Zeile im Blocksatz gezielt steuern

1. Der typische Bug: die letzte Zeile bleibt linksbündig, obwohl Zentrierung gewünscht ist

Ein wiederkehrendes Muster in Support-Foren und Bugtickets sieht so aus: Ein Entwickler setzt text-align: justify auf einen Absatz und erwartet, dass auch die letzte Zeile zentriert oder zumindest optisch ausgewogen erscheint, weil justify ja für Ausrichtung steht. Stattdessen bleibt die letzte Zeile stur linksbündig, während alle vorherigen Zeilen sauber bis zum rechten Rand gestreckt sind. Das ist kein Bug, sondern die spezifikationskonforme Standardeinstellung von text-align: justify.

Der Grund für dieses Verhalten liegt in der Definition von Blocksatz selbst: Nur vollständige Zeilen, die den gesamten verfügbaren Platz einer Zeile ausfüllen müssen, werden gestreckt. Die letzte Zeile eines Absatzes ist per Definition unvollständig, sie endet dort, wo der Text endet, nicht am rechten Rand. Ohne explizite Anweisung behandelt der Browser sie deshalb wie einen normalen, linksbündigen Text. Wer dieses Verhalten einmal verstanden hat, sieht text-align-last nicht mehr als Sonderfall, sondern als notwendige Ergänzung, ohne die Blocksatz im Web unvollständig bliebe.

2. Grundverhalten von text-align: justify rekapituliert

text-align: justify verteilt bei mehrzeiligem Text den Wortzwischenraum, und je nach Sprache auch den Zeichenabstand, so, dass jede vollständige Zeile exakt bis zum linken und rechten Rand des Containers reicht. Dieses Verhalten ist aus Zeitungslayouts und Büchern vertraut und erzeugt einen klaren, blockartigen optischen Rand auf beiden Seiten des Textes.

Weil text-align: justify nur das Verhalten der vollständigen Zeilen definiert, ist es aus Sicht der Spezifikation konsequent, dass eine eigene Property für die letzte, unvollständige Zeile existiert. text-align-last ergänzt text-align dabei, statt es zu ersetzen, beide Properties arbeiten unabhängig voneinander an unterschiedlichen Teilen desselben Absatzes.

3. Die Syntax von text-align-last: verfügbare Werte

text-align-last akzeptiert dieselben Grundwerte wie text-align: left, right, center, justify, sowie die schreibrichtungsabhängigen Werte start und end. Der Wert auto, der Standard, übernimmt das reguläre Verhalten, meist linksbündig in westlichen, von links nach rechts gelesenen Sprachen.

Wird text-align-last: justify explizit gesetzt, wird auch die letzte Zeile bis zum rechten Rand gestreckt wie alle übrigen Zeilen, was allerdings bei kurzen letzten Zeilen zu sehr großen, unschönen Wortzwischenräumen führen kann. In der Praxis sind center und right deshalb häufiger die gewünschte Wahl für die letzte Zeile als ein vollständiger Blocksatz.

p.justified {
  text-align: justify;
  text-align-last: center; /* letzte Zeile zentriert statt linksbuendig */
}

p.justified-full {
  text-align: justify;
  text-align-last: justify; /* auch letzte Zeile voll gestreckt */
}

4. Beispiel: eine zentrierte letzte Zeile im Blocksatz

Der häufigste Einsatzfall ist genau der eingangs beschriebene: Ein Blocksatz-Absatz, dessen letzte Zeile bewusst zentriert werden soll, statt linksbündig zu bleiben. Mit nur einer zusätzlichen Deklaration lässt sich dieses gewünschte Verhalten erreichen, ohne den Absatz in ein separates Element für die letzte Zeile aufzuteilen oder mit JavaScript nachzuhelfen.

Diese Kombination eignet sich besonders für kurze, prägnante Absätze wie Ankündigungstexte oder Editorial-Teaser, bei denen ein optisch ausgewogener Abschluss gewünscht ist, aber die vorherigen Zeilen dennoch den klaren, geraden Blocksatz-Rand behalten sollen, der in redaktionellen Layouts oft bevorzugt wird.

.editorial-teaser {
  text-align: justify;
  text-align-last: center;
  max-width: 42rem;
  line-height: 1.6;
}

5. Einsatzfall: zentrierte Zitate und Pull-Quotes

Bei Pull-Quotes, den optisch hervorgehobenen Zitatauszügen in Artikeln, wird häufig eine vollständige Zentrierung des gesamten Zitats gewünscht. Besteht das Zitat aus mehreren Zeilen und soll trotzdem sauber ausgerichtet wirken, kombiniert text-align: justify mit text-align-last: center die gleichmäßige Randausrichtung der oberen Zeilen mit einem zentrierten, optisch ruhigen Abschluss der letzten Zeile.

Alternativ setzen manche Redaktionen für kurze, einzeilige Zitate direkt text-align: center ohne Blocksatz, weil text-align-last bei einzeiligen Absätzen keine Wirkung entfaltet, es gibt dort schlicht keine vorherigen, vollständigen Zeilen, auf die sich der Unterschied zwischen text-align und text-align-last auswirken könnte.

6. Einsatzfall: Preislisten und tabellenähnliche Textblöcke

In Preislisten oder Bestellzusammenfassungen, die aus Layout-Gründen als Fließtext statt als HTML-Tabelle umgesetzt sind, wird oft gewünscht, dass eine Gesamtsumme oder ein Endbetrag in der letzten Zeile rechtsbündig erscheint, während der übrige Text linksbündig oder im Blocksatz bleibt. text-align-last: right erreicht genau das, ohne die Summenzeile in ein separates, zusätzlich zu positionierendes Element auslagern zu müssen.

Diese Technik ist besonders in E-Mail-Templates nützlich, wo komplexe Flexbox- oder Grid-Layouts oft nicht zuverlässig über alle E-Mail-Clients hinweg funktionieren, text-align-last aber als einfache, gut unterstützte CSS-Property auch in restriktiveren E-Mail-Rendering-Umgebungen zuverlässig greift.

.order-summary p {
  text-align: left;
}

.order-summary .total-line {
  text-align: justify;
  text-align-last: right; /* Endbetrag rechtsbuendig */
  font-weight: 700;
}

7. Zusammenspiel mit RTL-Sprachen und der direction-Property

Bei Sprachen mit Rechts-nach-Links-Schreibrichtung wie Arabisch oder Hebräisch kehrt sich die Bedeutung von left und right gegenüber der visuellen Wahrnehmung um, weshalb sich die schreibrichtungsabhängigen Werte start und end für internationale Projekte fast immer besser eignen als fest codierte left- oder right-Werte.

Gesetzt auf einem mit direction: rtl versehenen Container übersetzt der Browser text-align-last: end automatisch in die für die jeweilige Schreibrichtung korrekte Kante, ohne dass separate CSS-Regeln pro Sprachrichtung nötig werden. Für mehrsprachige Onlineshops mit sowohl europäischen als auch arabischsprachigen Store-Views ist das ein direkter Wartungsvorteil gegenüber physischen Richtungswerten. Gerade bei international aufgestellten Shops mit gemischten Store-Views summiert sich dieser Wartungsvorteil schnell über Dutzende Templates hinweg.

8. Häufiger Fehler: Verwechslung mit text-align und Debugging-Tipps

Der häufigste Fehler beim Debuggen dieses Verhaltens ist, ausschließlich an der text-align-Deklaration herumzuschrauben, in der Annahme, dass ein anderer Wert dort auch das Verhalten der letzten Zeile ändert. Weil beide Properties unabhängig voneinander funktionieren, bleibt eine Änderung an text-align ohne jede Wirkung auf die letzte Zeile, solange text-align-last nicht ebenfalls angepasst wird.

Ein zuverlässiger Debugging-Schritt ist, testweise einen zweiten, kürzeren Absatz mit denselben Styles einzufügen: Bleibt dessen einzige Zeile linksbündig, obwohl text-align: justify gesetzt ist, bestätigt das den Standardwert auto von text-align-last als Ursache, und die Lösung ist eine gezielte, explizite Ergänzung dieser Property, nicht eine erneute Anpassung von text-align.

/* Falsch: nur text-align angepasst, letzte Zeile bleibt links */
.wrong {
  text-align: justify;
}

/* Richtig: text-align-last explizit gesetzt */
.correct {
  text-align: justify;
  text-align-last: center;
}

9. Browser-Support und praktische Einordnung

Im Vergleich zu den meisten anderen fortgeschrittenen Typografie-Properties gilt text-align-last als solide, breit unterstütztes Feature, das in allen gängigen modernen Browsern zuverlässig funktioniert. Ein zusätzlicher Fallback ist deshalb in den meisten Projekten nicht nötig, was die Property zu einer der pragmatischsten Lösungen in diesem Themenfeld macht.

In Kombination mit hyphens und einer sorgfältig gewählten Spaltenbreite ergibt sich ein vollständiges, produktionsreifes Blocksatz-Setup, bei dem sowohl die Silbentrennung als auch das Verhalten der letzten Zeile explizit und bewusst kontrolliert werden, statt sich auf implizite Browser-Standardwerte zu verlassen, die je nach Kontext unerwartet wirken können. Wer diese Bausteine von Anfang an bewusst kombiniert, vermeidet nachträgliche Überraschungen, wenn Redakteure später längere Fachbegriffe oder fremdsprachige Passagen einfügen.

10. Zusammenfassung

11. FAQ: text-align-last: Das Wichtigste auf einen Blick