w3docs logo

CSS-Eigenschaft text-align-last

Die CSS-Eigenschaft text-align-last definiert die Ausrichtung der letzten Zeile des Textes.

Die Eigenschaft text-align-last definiert die Ausrichtung für alle letzten Zeilen innerhalb des ausgewählten Elements. Wenn ein Tag <div> mit drei Absätzen darin enthalten ist, gilt die Eigenschaft text-align-last für die letzte Zeile jedes der Absätze.

Diese Eigenschaft wird mit dem Präfix -moz- für Firefox 12-Firefox 48 unterstützt, und ohne Präfix für Firefox 49-Firefox 65.
Anfangswert auto
Gilt für Block-Containers
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax object.style.textAlignLast = "left";

Syntax

text-align-last: auto | left | right | center | justify | start | end | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div{
      text-align: justify;
      -moz-text-align-last: right; /* For Firefox prior 58.0 */
      text-align-last: right;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-align-last</h2>
    <h3>text-align-last: right:</h3>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Ein anderes Beispiel mit den Werten"start", "justify" und "center":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.example1 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: start; /* For Firefox prior 58.0 */
      text-align-last: start;
      }
      div.example2 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: center; /* For Firefox prior 58.0 */
      text-align-last: center;
      }
      div.example3 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: justify; /* For Firefox prior 58.0 */
      text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-align-last</h2>
    <h3>Text-align-last: start:</h3>
    <div class="example1">
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
    <h3>Text-align-last: center:</h3>
    <div class="example2">
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
    <h3>Text-align-last: justify:</h3>
    <div class="example3">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Die letzte Zeile ist links ausgerichtet, das ist der Standardwert dieser Eigenschaft.
left Positioniert die letzte Zeile nach links.
right Positioniert die letzte Zeile nach rechts.
center Positioniert die letzte Zeile in der Mitte.
justify Die letzte Zeile ist wie die anderen Zeilen ausgerichtet.
start Die letzte Linie wird am Anfang der Linie ausgerichtet. Links, wenn die Richtung von links nach rechts und rechts, wenn die Richtung von rechts nach links ist.
end Die letzte Zeile wird am Ende der Zeile ausgerichtet. Rechts, wenn die Richtung von links nach rechts ist, links, wenn die Richtung von rechts nach links ist.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
47.0+ ✕ 49.0+
12.0-48.0 -moz- 		✕ 34.0+

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'text-align-last' annehmen?
Finden Sie das nützlich?