CSS text-justify-Eigenschaft

Die text-justify-Eigenschaft definiert das Verhalten des Abstands zwischen Wörtern oder Zeichen.

Die text-justify-Eigenschaft ist eine der CSS3-Eigenschaften.

Die text-justify-Eigenschaft wählt die Blocksatz-Methode für Text aus, wenn text-align auf "justify" gesetzt ist.

Initial Value	auto
Applies to	Block-level elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.textJustify = "inter-character";

Syntax

CSS text-justify-Werte

css

text-justify: auto | inter-word | inter-character | none | initial | inherit;

Beispiel für die text-justify-Eigenschaft:

CSS text-justify-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: justify;
        text-justify: inter-word;
      }
    </style>
  </head>
  <body>
    <h2>Text-justify property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS text-justify inter-word value

Im folgenden Beispiel können Sie die Browsergröße ändern, um zu sehen, wie „justify“ funktioniert:

Beispiel für die text-justify-Eigenschaft mit dem Wert „inter-character“:

CSS text-justify mit inter-character-Wert-Beispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: justify;
        text-justify: inter-character;
      }
    </style>
  </head>
  <body>
    <h2>Text-justify property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Hinweis: Die Browserunterstützung für text-justify ist begrenzt. Der Wert inter-character wird in den meisten modernen Browsern nicht unterstützt.

Werte

Value	Description	Play it
`auto`	Der Algorithmus für den Blocksatz wird festgelegt. Der Browser darf bestimmen, ob inter-word oder inter-character besser für den Blocksatz geeignet ist. Dies ist der Standardwert dieser Eigenschaft.	Testen »
`inter-word`	Der Browser vergrößert den Abstand zwischen den Wörtern. Dies ist typisch für Sprachen mit klaren Wortgrenzen.	Testen »
`inter-character`	Der Browser vergrößert den Abstand zwischen den Zeichen während des Blocksatzes.	Testen »
`none`	Blocksatz ist deaktiviert.	Testen »
`initial`	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Testen »
`inherit`	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche verschiedenen Werte hat die 'text-justify'-Eigenschaft in CSS und was bedeuten sie?

'auto' - Der Browser bestimmt die Ausrichtung.'none' - Der Text wird nicht Blocksatzartig ausgerichtet. Die Textausrichtung wird durch die 'text-align'-Eigenschaft bestimmt.'inter-word' - Der Blocksatz erfolgt durch zusätzlichen Abstand zwischen den Wörtern.'inter-character' - Der Blocksatz erfolgt durch zusätzlichen Abstand zwischen den Zeichen.'inter-line' - Der Blocksatz erfolgt durch zusätzlichen Abstand zwischen den Zeilen.

CSS text-justify-Eigenschaft ​

Syntax ​

Beispiel für die text-justify-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-justify-Eigenschaft mit dem Wert „inter-character“: ​

Werte ​