Propriété CSS text-align-last

La propriété CSS text-align-last définit l'alignement de la dernière ligne du texte.

La propriété text-align-last définit l'alignement de toutes les dernières lignes dans l'élément choisi. S'il y a un <div> avec trois paragraphes, text-align-last s'appliquera à la dernière ligne du chaque paragraphe.

Cette propriété est supportée avec un préfixe -moz- pour Firefox 12-Firefox 48, et elle est supportée sans le préfixe pour Firefox 49-Firefox 65.
Valeur initiale auto
Appliquée à Conteneurs bloc.
Héritée Oui.
Animable Non.
Version CSS3
Syntaxe DOM object.style.textAlignLast = "left";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div{
      text-align: justify;
      -moz-text-align-last: right; /* For Firefox prior 58.0 */
      text-align-last: right;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-align-last</h2>
    <h3>text-align-last: right:</h3>
    <div>
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum.
    </div>
  </body>
</html>

Un autre exemple, dans lequel les valeurs "start", "justify" et "center" sont comprises:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de la propriété text-align-last</h2>
    <h3>Text-align-last: start:</h3>
    <div class="example1">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum.
    </div>
    <h3>Text-align-last: center:</h3>
    <div class="example2">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum.
    </div>
    <h3>Text-align-last: justify:</h3>
    <div class="example3">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum.
    </div>
  </body>
</html>

Valeurs

Valeur Description
auto La dernière ligne est alignée à la gauche .C'est la valeur initiale de cette propriété.
left Aligne la dernière ligne à la gauche.
right Aligne la dernière ligne à la droite.
center Aligne la dernière ligne au centre.
justify La dernière ligne est justifiée comme les autres lignes.
start La dernière ligne est alignée au début de la ligne, à la gauche si la direction est de la gauche à la droite et à la droite si la direction est de la droite à la gauche.
end La dernière ligne est alignée à la fin de la ligne, à la droite si la direction est de la gauche à la droite et à la gauche si la direction est de la droite à la gauche
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

47.0+ 49.0+
12.0-48.0 -moz-
34.0+


Trouvez-vous cela utile?

Articles Associées