CSS hanging-punctuation Eigenschaft
CSS hanging-punctuation: Syntax, alle Werte (none, first, last, allow-end, force-end), Live-Beispiele, Wertekombinationen und Browser-Unterstützung.
Die CSS-Eigenschaft hanging-punctuation steuert, ob ein Satzzeichen — etwa ein öffnendes oder schließendes Anführungszeichen, ein Komma oder ein Punkt — hängend außerhalb der Start- oder Endkante einer Zeilenbox positioniert werden soll, anstatt innerhalb des Inhaltsbereichs zu sitzen.
Diese Technik stammt aus der Drucktypografie: Wenn ein Absatz mit einem öffnenden Anführungszeichen beginnt, sorgt das Herausragen dieses Zeichens nach links dafür, dass die eigentlichen Buchstaben optisch ausgerichtet bleiben. Dasselbe gilt für abschließende Satzzeichen — ein hängender Punkt oder ein Komma hält die rechte Kante eines blocksatzmäßig ausgerichteten Absatzes sauber und scharf.
Die Browser-Unterstützung ist begrenzt. Stand 2026 wird
hanging-punctuationnur in Safari (der WebKit-Engine) unterstützt. Chrome, Edge und Firefox ignorieren es. Behandeln Sie es als Progressive Enhancement — wenn der Browser es nicht unterstützt, wird der Text einfach ohne Hängen gerendert, was ein vollkommen sicherer Fallback ist.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente |
| Vererbt | Ja |
| Animierbar | Nein |
| Version | CSS3 |
| DOM-Syntax | object.style.hangingPunctuation = "first last"; |
Syntax
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
hanging-punctuation: force-end;
/* Combine edge keywords */
hanging-punctuation: first last;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end;
hanging-punctuation: last allow-end;
hanging-punctuation: last force-end;
/* Global values */
hanging-punctuation: initial;
hanging-punctuation: inherit;
hanging-punctuation: unset;In einer Deklaration können bis zu drei Schlüsselwörter stehen: höchstens ein Startkanten-Schlüsselwort (first), höchstens ein Endkanten-Schlüsselwort (last) und höchstens ein Zeilenmittelwert (allow-end oder force-end).
Welche Zeichen hängen?
Die CSS-Spezifikation definiert „hängende" Zeichen wie folgt:
- Öffnende Satzzeichen, die am Anfang hängen:
",',«,‹sowie deren ostasiatische Entsprechungen. - Schließende Satzzeichen, die am Ende hängen:
",',»,›,.,,,!,?,。,、und Ähnliches.
Nur die Zeichen an der äußersten Kante einer Zeile kommen in Frage — innere Satzzeichen innerhalb einer Zeile sind nicht betroffen.
Werte
| Wert | Beschreibung |
|---|---|
none | Kein Satzzeichen hängt. Dies ist der Standardwert. |
first | Ein öffnendes Satzzeichen am Anfang der ersten Zeile hängt außerhalb der Startkante der Box. |
last | Ein schließendes Satzzeichen am Ende der letzten Zeile hängt außerhalb der Endkante der Box. |
allow-end | Ein schließendes Satzzeichen am Ende einer beliebigen Zeile hängt nur dann, wenn es andernfalls nicht passt, bevor der Blocksatz angewendet wird. |
force-end | Ein schließendes Satzzeichen am Ende jeder Zeile hängt immer, unabhängig davon, ob es gepasst hätte. |
initial | Setzt auf den Standardwert zurück (none). |
inherit | Erbt den berechneten Wert vom Elternelement. |
unset | Setzt auf den vererbten Wert zurück, wenn die Eigenschaft vererbt wird (was hier der Fall ist), was im Grunde dasselbe wie inherit ist. |
allow-end vs. force-end
Der Unterschied zwischen diesen beiden Endwerten ist subtil, aber wichtig:
allow-end— hängt das Schluss-Satzzeichen nur dann, wenn es vor Anwendung des Blocksatzes nicht in die Zeile passt. Mit anderen Worten: Der Browser verwendet das Hängen nur als letztes Mittel, um unangenehme Blocksatzlücken zu vermeiden.force-end— hängt das Schluss-Satzzeichen immer in den Rand jeder Zeile, unabhängig vom verfügbaren Platz. Dies kann einen gleichmäßigen optischen Rand erzeugen, kann aber auf kurzen Zeilen seltsam wirken.
Verwenden Sie allow-end für Fließtext, wenn Sie Dezenz wünschen; verwenden Sie force-end, wenn Sie eine strikte optische Randausrichtung ähnlich klassischen Satzsystemen erreichen möchten.
hanging-punctuation: first
Der Wert first ermöglicht es einem öffnenden Satzzeichen in der ersten Zeile, außerhalb der Start- (linken, bei LTR-Text) Kante der umschließenden Box zu hängen. Das Ergebnis ist, dass der Fließtext optisch ausgerichtet bleibt, während das öffnende Anführungszeichen in den Rand schwebt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
font-style: normal;
font-size: 25px;
width: 20em;
border-left: 1px solid #000;
padding: 3rem 0;
hanging-punctuation: first;
}
</style>
</head>
<body>
<h2>Hanging-punctuation property example</h2>
<blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
</body>
</html>Ergebnis
![CSS hanging-punctuation Eigenschaft](/uploads/media/default/0001/04/da969d68b09b2be6083c7027f773927d30f8cabe.png "CSS hanging-punctuation property result" =420x)
Das öffnende "-Zeichen verschiebt sich nach links von der Randlinie, sodass das L in Lorem optisch mit den darunter liegenden Zeilen ausgerichtet ist.
hanging-punctuation: last
Der Wert last hängt ein schließendes Satzzeichen — etwa einen Punkt, ein Komma oder ein schließendes Anführungszeichen in der letzten Zeile — außerhalb der End- (rechten, bei LTR-Text) Kante der Box. Dies ist besonders nützlich bei rechtsbündigem oder blocksatzartigem Text, bei dem ein Satzzeichen im Rand eine raue optische Kante verhindert.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 22px;
width: 16em;
text-align: justify;
border-right: 1px solid #000;
padding: 1rem 0;
hanging-punctuation: last;
}
</style>
</head>
<body>
<h2>hanging-punctuation: last</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry, used here to show a trailing punctuation mark.
</p>
</body>
</html>Der abschließende Punkt am Ende des Absatzes verschiebt sich nach rechts von der Randlinie und hält die rechte Kante des Blocksatz-Blocks optisch sauber.
Werte kombinieren
Sie können first, last und eines der Endkanten-Schlüsselwörter in einer einzigen Deklaration kombinieren. Die Reihenfolge der Schlüsselwörter spielt keine Rolle:
/* Hang opening quote at start AND closing punctuation at end */
blockquote {
hanging-punctuation: first last;
}
/* Hang opening quote at start, and allow end-punctuation to hang when needed */
p {
hanging-punctuation: first allow-end;
}Die Kombination first last ist ein gängiges typografisches Muster für Blockzitate: Das öffnende " hängt oben links und das schließende " oder . hängt unten rechts.
Praktische Anwendungshinweise
Mit text-indent für optische Ausrichtung kombinieren.
Wenn Sie ein negatives text-indent auf einem Container setzen, können hanging-punctuation: first und text-indent in Konflikt geraten. Bevorzugen Sie hanging-punctuation gegenüber einem manuellen negativen Einzug — es ist semantisch korrekt und verschlechtert sich graceful.
Mit Blocksatztext kombinieren.
hanging-punctuation: last und force-end funktionieren am besten mit text-align: justify (siehe text-align). Bei linksbündigem Text ist der Effekt meist unsichtbar, es sei denn, die letzte Zeile endet genau an der Boxkante.
Auf <blockquote> und Pull-Quotes anwenden.
Diese Elemente beginnen fast immer mit einem öffnenden Anführungszeichen, was hanging-punctuation: first zur wirkungsvollsten und risikoärmsten Anwendungsstelle macht.
Progressive Enhancement — kein @supports erforderlich.
Da die Eigenschaft vererbt wird und auf none zurückfällt, können Sie sie sicher ohne Feature-Query anwenden:
blockquote {
hanging-punctuation: first last; /* ignored by Chrome/Edge/Firefox; used by Safari */
}Verwandte Eigenschaften
Diese Eigenschaften werden häufig zusammen mit hanging-punctuation verwendet, wenn die Typografie fein abgestimmt wird:
- text-align — legt die horizontale Ausrichtung fest;
justifymacht hängende Schluss-Satzzeichen am deutlichsten sichtbar. - text-justify — steuert, wie Blocksatztext den Abstand zwischen Wörtern und Zeichen verteilt.
- text-indent — rückt die erste Zeile eines Blocks ein; kann mit
hanging-punctuation: firstkombiniert werden. - hyphens — steuert die automatische Silbentrennung; in Kombination mit
hanging-punctuationentsteht volle typografische Kontrolle über Zeilenenden. - white-space — regelt den Umgang mit Leerzeichen und Zeilenumbrüchen innerhalb von Text.