hyphens

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

hyphens = 
  none    |
  manual  |
  auto    

hyphens: none
hyphens: manual
hyphens: auto

hyphens: inherit

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).

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.

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;
}

• content