text-justify

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die text-justify CSS Eigenschaft legt fest, welche Art der Ausrichtung auf Text angewendet werden soll, wenn text-align: justify; auf ein Element gesetzt ist.

Syntax

css

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

none: Die Textausrichtung ist deaktiviert. Dies hat den gleichen Effekt wie das Nichtsetzen von text-align, obwohl es nützlich sein kann, wenn Sie die Ausrichtung aus irgendeinem Grund ein- und ausschalten müssen.
auto: Der Browser wählt die beste Art der Ausrichtung für die aktuelle Situation basierend auf einem Gleichgewicht zwischen Leistung und Qualität, aber auch darauf, was am geeignetsten für die Sprache des Textes ist (z.B. Englisch, CJK-Sprachen usw.). Dies ist die standardmäßig verwendete Ausrichtung, wenn text-justify überhaupt nicht gesetzt ist.
inter-word: Der Text wird durch Hinzufügen von Zwischenräumen zwischen Wörtern ausgerichtet (effektiv variierend word-spacing), was am besten für Sprachen geeignet ist, die Wörter mit Leerzeichen trennen, wie Englisch oder Koreanisch.
inter-character: Der Text wird durch Hinzufügen von Zwischenräumen zwischen Zeichen ausgerichtet (effektiv variierend letter-spacing), was für Sprachen wie Japanisch am besten geeignet ist.
distribute: Zeigt das gleiche Verhalten wie inter-character; dieser Wert wird zur Abwärtskompatibilität beibehalten.

Formale Definition

Initialer Wert	`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

Beispiele

Demonstration der verschiedenen Werte von text-justify

<p class="none">
  <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 class="auto">
  <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 class="dist">
  <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 class="word">
  <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 class="char">
  <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>

css

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

text-align