hyphens

Übersicht

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

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 Suggesting line break opportunities).

auto

Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe Suggesting line break opportunities).

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

Siehe auch

• content