hyphens

├ťbersicht

Die hyphens Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut lang, bzw. xml:lang unter XML, zwingend notwendig.

Hinweis: Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.
Initialwertmanual
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

none | manual | auto
hyphens: none
hyphens: manual
hyphens: auto

hyphens: inherit

Werte

none
Keine Silbentrennung: W├Ârter werden nicht getrennt und automatische Zeilenumbr├╝che sind nur bei Leerzeichen m├Âglich.
manual
Manuelle Silbentrennung: W├Ârter werden nur dann getrennt, wenn dies definiert wurde (siehe Umbr├╝che manuell definieren).
auto
Automatische Silbentrennung: Der Browser trennt die W├Ârter automatisch. Manuell definierte Umbr├╝che werden dabei vorgezogen (siehe Umbr├╝che manuell definieren).

Umbr├╝che manuell definieren

Es gibt zwei M├Âglichkeiten, um W├Ârter manuell zu trennen. Daf├╝r werden die beiden folgenden Unicode-Zeichen verwendet:

U+2010 (Bindestrich)
Dieser Bindestrich ist immer sichtbar, auch wenn das Wort gar nicht getrennt werden muss.
U+00AD (SHY)
Dieses Zeichen ist unsichtbar und kennzeichnet nur eine m├Âgliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML l├Ąsst sich das Zeichen mit ­ einf├╝gen.

Beispiel

This CSS snippet creates three classes, one for each possible configuration of the hyphens property.

<ul>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>: hyphen where the algo is deciding (if needed)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>
p {
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -moz-hyphens: none;
  hyphens: none;
}
p.manual {
  -moz-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -moz-hyphens: auto;
  hyphens: auto;
}

Spezifikations

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch