CSS/Eigenschaften/Textausrichtung/hyphens

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft hyphens (engl. hyphen - Bindestrich) können Sie eine automatische Worttrennung einrichten.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Leer
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>hyphens</title>
      <style>
      p {
        font-size: 1.5em;
        -ms-hyphens: none;
        -webkit-hyphens: none;
        hyphens: none;
        max-width: 25em;
        text-align: justify;
      }
      .trennung {
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
      }
      </style>
  </head>
  <body>
    <h1>automatische Worttrennung mit hyphens</h1>
    <p>
        Donaudampfschiffahrtsgesellschaftskapitän (seit der
        Rechtschreibreform 1996, und damit erst nach Auflösung
        des Unternehmens:
        Donau­dampfschifffahrtsgesellschaftskapitän) war eine
        inoffizielle Bezeichnung für einen Kapitän der von 1829
        bis 1991 existierenden Donaudampfschiffahrtsgesellschaft
        (DDSG). Das Wort ist ein populäres Beispiel für die
        Bildung von Mehrfachkomposita in der deutschen Sprache.
    </p>
    <p class="trennung">
        Donaudampfschiffahrtsgesellschaftskapitän (seit der
        Rechtschreibreform 1996, und damit erst nach Auflösung
        des Unternehmens:
        Donau­dampfschifffahrtsgesellschaftskapitän) war eine
        inoffizielle Bezeichnung für einen Kapitän der von 1829
        bis 1991 existierenden Donaudampfschiffahrtsgesellschaft
        (DDSG). Das Wort ist ein populäres Beispiel für die
        Bildung von Mehrfachkomposita in der deutschen Sprache.
     </p>
  </body>
</html>
Durch den erzwungenen Blocksatz mithilfe der Eigenschaft text-align werden die Leerräume zwischen den Wörtern verbreitert, was zu unschönen Effekten führt, wenn die Absätze sehr schmal oder einzelne Wörter sehr lang werden.

Mit hyphens können Sie eine automatische Worttrennung einrichten. Folgende Angaben sind möglich:

  • manual, keine automatische Silbentrennung, Voreinstellung, bedingte Trennstriche (&shy; bzw. &#173;) werden beachtet
  • none, keine automatische Silbentrennung, bedingte Trennstriche werden unterdrückt, Umbruch erfolgt ausschließlich an Leerzeichen
  • auto, automatische Silbentrennung, manuell definierte bedingte Trennstriche werden dabei vorgezogen.
  • inherit, Einstellung des Elternelements
Beachten Sie: Wenn Sie die automatische Silbentrennung verwenden möchten, muss für das entsprechende Element mittels des Attributs lang die verwendete Sprache angegeben werden.
Beachten Sie: Eine für ein Element festgelegte Worttrennungseinstellung wird ohne Ihr Zutun an die Kindelemente vererbt.


Achtung!

Die Eigenschaft hyphens ist derzeit (Stand: August 2016) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Edge, Internetexplorer -ms-hyphens
für Safari -webkit-hyphens

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

siehe auch[Bearbeiten]