hanging-punctuation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die hanging-punctuation CSS Eigenschaft gibt an, ob ein Satzzeichen am Anfang oder Ende einer Textzeile hängen soll. Hängende Satzzeichen können außerhalb der Zeilenbox platziert werden.

Syntax

css
/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;

/* Two keywords */
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last allow-end;

/* Three keywords */
hanging-punctuation: first allow-end last;

/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;

Die hanging-punctuation-Eigenschaft kann mit einem, zwei oder drei durch Leerzeichen getrennten Werten angegeben werden.

Werte

none

Kein Zeichen hängt.

first

Eine öffnende Klammer oder ein Anführungszeichen am Anfang der ersten formatierten Zeile eines Elements hängt. Dies gilt für:

  • alle Zeichen in den Unicode-Kategorien Ps, Pf, Pi
  • die Anführungszeichen U+0027 APOSTROPH (') und U+0022 ANFÜHRUNGSZEICHEN (").
last

Eine schließende Klammer oder ein Anführungszeichen am Ende der letzten formatierten Zeile eines Elements hängt. Dies gilt für:

  • alle Zeichen in den Unicode-Kategorien Pe, Pf, Pi
  • die Anführungszeichen U+0027 APOSTROPH (') und U+0022 ANFÜHRUNGSZEICHEN (").
allow-end

Ein Punkt oder Komma am Ende einer Zeile hängt, wenn es sonst nicht vor der Ausrichtung passt.

Erlaubte Punkte und Kommas zum Hängen umfassen:

  • U+002C, KOMMA
  • U+002E, PUNKT
  • U+060C, ARABISCHES KOMMA
  • U+06D4, ARABISCHER PUNKT
  • U+3001, IDEOGRAPHISCHES KOMMA
  • U+3002, IDEOGRAPHISCHER PUNKT
  • U+FF0C, VOLLBREITES KOMMA
  • U+FF0E, VOLLBREITER PUNKT
  • U+FE50, KLEINES KOMMA
  • U+FE51, KLEINES IDEOGRAPHISCHES KOMMA
  • U+FE52, KLEINER PUNKT
  • U+FF61, HALBBREITER IDEOGRAPHISCHER PUNKT
  • U+FF64, HALBBREITES IDEOGRAPHISCHES KOMMA

Benutzeragenten können zusätzliche Zeichen einschließen.

Formale Definition

Initialer Wertnone
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

hanging-punctuation = 
  none                                            |
  [ first || [ force-end | allow-end ] || last ]

Beispiele

Öffnende und schließende Anführungszeichen hängen lassen

HTML

html
<p>
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging right">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

CSS

css
p {
  width: 15em;
  border: 1px solid #cccccc;
  font-size: 2rem;
  font-style: italic;
  margin: 1em;
}

p.hanging {
  hanging-punctuation: first last;
}

p.right {
  text-align: right;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3
# hanging-punctuation-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch