Die hanging-punctuation Eigenschaft zielt darauf ab, Webdesignern eine feinere Kontrolle über die Typografie im Web zu geben.
Die Idee hinter der hängenden Interpunktion besteht darin, einige Interpunktionszeichen vom Anfang (oder in geringerem Maße am Ende) von Textelementen „außerhalb“ der Box zu platzieren, um den Lesefluss zu erhalten.
Grundsätzlich würde dieses Zitat, diese Aufzählungszeichen oder was auch immer leicht nach links (oder rechts im rtl -Modus) verschoben, so dass der erste Buchstabe richtig mit dem Rest des Dokuments ausgerichtet ist.
Bitte beachten Sie, dass diese Eigenschaft optional ist, sodass Browserhersteller sie möglicherweise nicht unterstützen.
Syntax
hanging-punctuation: none | || last ]blockquote p { hanging-punctuation: first;} none
Kein Charakter hängt. Dies ist der Standardwert für diese Eigenschaft.
first
Ein verfügbares Zeichen am Anfang der ersten formatierten Zeile eines Elements hängt.
last
Ein verfügbares Zeichen am Ende der letzten formatierten Zeile eines Elements hängt.
force-end
Ein Stopp oder Komma am Ende einer Zeile hängt.
Die Interpunktion muss hängen bleiben und wird beim Messen der Linie zur Rechtfertigung nicht berücksichtigt.
allow-end
Ein Stopp oder Komma am Ende einer Zeile hängt, wenn es vor der Rechtfertigung nicht anders passt.
Die Interpunktion am Ende der ersten Zeile für hängt nicht, weil sie passt, ohne zu hängen. In der zweiten Zeile ist jedoch nicht genügend Platz vorhanden, sodass sie hängen bleibt.
Verfügbare Zeichen
| Code | Zeichen | Name |
|---|---|---|
U+002C |
, | KOMMA |
U+002E |
. | PUNKT |
U+060C |
، | ARABISCHES KOMMA |
U+06D4 |
۔ | ARABISCH PUNKT |
U+3001 |
、 | IDEOGRAFISCHES KOMMA |
U+3002 |
。 | IDEOGRAFISCHER PUNKT |
U+FF0C |
， | KOMMA IN VOLLER BREITE |
U+FF0E |
． | VOLLE BREITE PUNKT |
U+FE50 |
﹐ | KLEINES KOMMA |
U+FE51 |
﹑ | KLEINES IDEOGRAFISCHES KOMMA |
U+FE52 |
﹒ | KLEINER PUNKT |
U+FF61 |
｡ | HALBBREITE IDEOGRAFISCHER PUNKT |
U+FF64 |
､ | IDEOGRAFISCHES KOMMA MIT HALBER BREITE |
Beachten Sie, dass Benutzeragenten dieser Liste beliebige Zeichen hinzufügen dürfen. Zitieren der Spezifikation:
Die UA kann gegebenenfalls andere Zeichen enthalten.
Verwandte Eigenschaften
text-indenttext-align
Andere Ressourcen
-
hanging-punctuationin der Spezifikation -
hanging-punctuationmit CSS von Steve Hickey
Browserunterstützung
Diese Browser-Support-Daten sind von Caniuse, die mehr Details hat. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version unterstützt.
Tischplatte
| Chrom | Feuerfuchs | IE | Rand | Safari |
|---|---|---|---|---|
| Nein | Nein | Nein | Nein | 10 |
Handy / Tablet
| Androide Chrom | Androide Feuerfuchs | Androide | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | 10.0-10.2 |
Ein anständiger Fallback für nicht unterstützte Browser wäre die Verwendung eines negativen Texteinzugs wie folgt:
blockquote p { text-indent: -0.5em; /* Change according to your font */} Bei Aufzählungslisten sollten Sie sicherstellen, dass die Position der Aufzählungszeichen auf outside und der Überlauf des Containers nicht auf hidden festgelegt ist.