Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
text-justify
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Dietext-justifyCSS-Eigenschaft legt fest, welcher Art von Blocksatz auf den Text angewendet werden soll, wenntext-align: justify; auf ein Element gesetzt ist.
Syntax
text-justify: none;text-justify: auto;text-justify: inter-word;text-justify: inter-character;text-justify: distribute; /* Deprecated value *//* Global values */text-justify: inherit;text-justify: initial;text-justify: revert;text-justify: revert-layer;text-justify: unset;Werte
noneDie Textjustierung ist ausgeschaltet. Dies hat den gleichen Effekt wie das Nicht-Setzen von
text-align, obwohl es nützlich ist, wenn Sie die Justierung aus irgendwelchen Gründen ein- und ausschalten müssen.autoDer Browser wählt die beste Art der Justierung für die aktuelle Situation basierend auf einem Gleichgewicht zwischen Leistung und Qualität, aber auch darauf, was für die Sprache des Textes am geeignetsten ist (z. B. Englisch, CJK-Sprachen usw.). Dies ist die Standardjustierung, wenn
text-justifyüberhaupt nicht gesetzt ist.inter-wordDer Text wird durch Hinzufügen von Abstand zwischen den Wörtern (effektiv
word-spacingvariierend) ausgerichtet, was für Sprachen, die Wörter durch Leerzeichen trennen, wie Englisch oder Koreanisch, am geeignetsten ist.inter-characterDer Text wird durch Hinzufügen von Abstand zwischen den Zeichen (effektiv
letter-spacingvariierend) ausgerichtet, was für Sprachen wie Japanisch am geeignetsten ist.distributeZeigt dasselbe Verhalten wie
inter-character; dieser Wert wird aus Gründen der Rückwärtskompatibilität beibehalten.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Inline- und table-cell Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
text-justify =
[auto|none|inter-word|inter-character|ruby]||
no-compress
Beispiele
Demonstration der verschiedenen Werte von text-justify
<p> <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p><p> <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p><p> <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p><p> <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p><p> <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>p { font-size: 1.5em; border: 1px solid black; padding: 10px; width: 95%; margin: 10px auto; text-align: justify;}.none { text-justify: none;}.auto { text-justify: auto;}.dist { text-justify: distribute;}.word { text-justify: inter-word;}.char { text-justify: inter-character;}Spezifikationen
| Specification |
|---|
| CSS Text Module Level 3 # text-justify-property |