hyphens CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die hyphens CSS Eigenschaft legt fest, wie Wörter bei einem Zeilenumbruch getrennt werden sollen. Sie kann die Trennung komplett verhindern, eine Trennung an manuell festgelegten Punkten im Text vornehmen oder dem Browser erlauben, Bindestriche automatisch an geeigneten Stellen einzufügen.
Probieren Sie es aus
hyphens: none;
hyphens: manual;
hyphens: auto;
<section id="default-example">
<p id="example-element">An extraordinarily long English word!</p>
</section>
#example-element {
border: 2px dashed #999999;
font-size: 1.5rem;
text-align: left;
width: 7rem;
}
Hinweis:
Im obigen Beispiel enthält der String "An extraordinarily long English word!" das versteckte Zeichen ­ (weicher Trennstrich): An extra­ordinarily long English word!. Dieses Zeichen wird verwendet, um eine potenzielle Stelle für das Einfügen eines Bindestrichs anzugeben, wenn hyphens: manual; angegeben ist.
Trennungsregeln sind sprachspezifisch. In HTML wird die Sprache durch das lang Attribut bestimmt, und Browser trennen nur, wenn dieses Attribut vorhanden ist und das passende Trennungswörterbuch verfügbar ist. In XML muss das xml:lang Attribut verwendet werden.
Hinweis: Die Regeln, wie die Trennung durchgeführt wird, sind nicht explizit in der Spezifikation definiert, daher kann die genaue Trennung von Browser zu Browser variieren.
Falls unterstützt, kann hyphenate-character verwendet werden, um ein alternatives Trennzeichen anzugeben, das am Ende der gebrochenen Zeile verwendet wird.
Syntax
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
Die hyphens Eigenschaft wird als ein einzelner Schlüsselwortwert angegeben, der aus der untenstehenden Liste ausgewählt wird.
Werte
none-
Wörter werden nicht bei Zeilenumbrüchen getrennt, selbst wenn Zeichen innerhalb der Wörter mögliche Trennstellen anzeigen. Zeilen werden nur an Leerzeichen umgebrochen.
manual-
Standardwert. Wörter werden für den Zeilenumbruch nur dort getrennt, wo Zeichen innerhalb des Wortes Umbruchmöglichkeiten anzeigen. Weitere Details finden Sie unter Umbruchmöglichkeiten vorschlagen unten.
auto-
Der Browser kann Wörter an passenden Trennstellen automatisch umbrechen, nach welchen Regeln er auch immer auswählt. Jedoch werden vorgeschlagene Umbruchmöglichkeiten (siehe Umbruchmöglichkeiten vorschlagen unten) Vorrang vor der automatischen Auswahl von Trennstellen haben, wenn vorhanden.
Hinweis:
Das Verhalten der auto Einstellung hängt davon ab, dass die Sprache korrekt getaggt ist, um die entsprechenden Trennungsregeln auszuwählen. Sie müssen eine Sprache mit dem lang HTML-Attribut angeben, um zu garantieren, dass die automatische Trennung in dieser Sprache angewendet wird.
Hinweis:
Wenn Sie word-break: break-all anwenden, werden keine Bindestriche angezeigt, selbst wenn das Wort an einer Trennstelle gebrochen wird.
Umbruchmöglichkeiten vorschlagen
Es gibt zwei Unicode-Zeichen, die manuell potenzielle Umbruchstellen innerhalb eines Textes angeben:
- U+2010 (HYPHEN)
-
Das "harte" Trennzeichen zeigt eine sichtbare Umbruchmöglichkeit an. Selbst wenn die Zeile tatsächlich nicht an diesem Punkt gebrochen wird, wird der Bindestrich trotzdem gerendert.
- U+00AD (SHY)
-
Ein unsichtbarer, "softer" hyphen. Dieses Zeichen wird nicht sichtbar dargestellt; stattdessen markiert es eine Stelle, an der der Browser das Wort brechen soll, wenn eine Trennung notwendig ist. In HTML benutzen Sie
­, um einen weichen Trennstrich einzufügen.
Hinweis:
Wenn das HTML <wbr> Element zu einem Zeilenumbruch führt, wird kein Bindestrich hinzugefügt.
Formale Definition
| Anfangswert | manual |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
hyphens =
none |
manual |
auto
Beispiele
Texttrennung spezifizieren
Dieses Beispiel verwendet drei Klassen, eine für jede mögliche Konfiguration der hyphens Eigenschaft.
HTML
<dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme­ly long English word</dd>
<dt>
<code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
</dt>
<dd lang="en" class="manual">An extreme­ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme­ly long English word</dd>
</dl>
CSS
dd {
width: 55px;
border: 1px solid black;
}
dd.none {
hyphens: none;
}
dd.manual {
hyphens: manual;
}
dd.auto {
hyphens: auto;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 3 # hyphens-property |
Browser-Kompatibilität
Siehe auch
contentoverflow-wrap(ehemalsword-wrap)word-break- Leitfaden zum Umbruch und Trennung von Text