Propriété CSS text-align-last - Syntaxe, valeurs, exemples

La propriété CSS text-align-last définit l'alignement de la dernière ligne d'un bloc de texte — et uniquement la dernière ligne. C'est l'une des propriétés CSS3 et elle fonctionne en étroite collaboration avec la propriété text-align.

Lorsque vous justifiez un paragraphe avec text-align: justify, chaque ligne est étirée pour occuper toute la largeur — sauf la dernière, qui reste courte et alignée au début par défaut. text-align-last est la propriété qui détermine ce qui se passe avec cette ligne finale « irrégulière ».

La propriété cible la dernière ligne mise en forme du conteneur de bloc auquel elle est appliquée. Par exemple, si un <div> contient un long texte qui passe à la ligne, text-align-last stylise la seule ligne tout en bas — les mots restants qui n'ont pas rempli une ligne complète.

Note

Cette propriété est surtout visible lorsque text-align: justify est utilisé et que le texte s'étend sur plusieurs lignes. Sur une seule ligne de texte, la dernière ligne est la seule ligne, et elle se comporte donc de manière identique à text-align.

Quand l'utiliser

Utilisez text-align-last lorsqu'un texte justifié laisse une dernière ligne gênante et que vous souhaitez plus de contrôle :

justify — force la dernière ligne à s'étirer sur toute la largeur également, de sorte que le paragraphe forme un bloc rectangulaire net (courant dans les mises en page de style imprimé et les affiches).
center — donne à un bloc justifié une ligne de clôture centrée, souvent utilisée pour des titres courts ou des citations mises en valeur.
right / end — pousse la dernière ligne vers le bord opposé pour un rendu délibérément asymétrique.

La propriété étant héritée, la définir une fois sur un élément enveloppant l'applique à tous les conteneurs de blocs internes, sauf si un enfant la redéfinit.

Valeur initiale	auto
S'applique à	Conteneurs de blocs.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textAlignLast = "left";

Compatibilité des navigateurs

Navigateur	Support
Chrome	50+
Edge	12+
Firefox	49+
Safari	10.1+
Opera	37+

Syntaxe

Syntaxe CSS de text-align-last

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

Exemple de la propriété text-align-last :

Exemple de code CSS text-align-last

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .demo {
        text-align: justify;
        text-align-last: right;
      }
    </style>
  </head>
  <body>
    <h2>Text-align-last property example</h2>
    <h3>text-align-last: right:</h3>
    <div class="demo">
      Lorem Ipsum is 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>

Essayez vous-même »

Résultat

Exemple de la propriété text-align-last avec les valeurs « start », « justify » et « center » :

Exemple CSS text-align-last avec toutes les valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .demo1 {
        text-align: justify;
        text-align-last: start;
      }
      .demo2 {
        text-align: justify;
        text-align-last: center;
      }
      .demo3 {
        text-align: justify;
        text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align-last property example</h2>
    <h3>Text-align-last: start:</h3>
    <div class="demo1">
      Lorem Ipsum is 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>
    <h3>Text-align-last: center:</h3>
    <div class="demo2">
      Lorem Ipsum is 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>
    <h3>Text-align-last: justify:</h3>
    <div class="demo3">
      Lorem Ipsum is 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>

Essayez vous-même »

Exemple de la propriété text-align-last avec la valeur « end » :

Notez que text-align-last est appliquée au <div> enveloppant, mais chaque <p> à l'intérieur est son propre conteneur de bloc — ainsi, l'alignement end affecte la dernière ligne de chaque paragraphe, pas uniquement le dernier paragraphe du groupe.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .demo {
        text-align: justify;
        text-align-last: end;
      }
    </style>
  </head>
  <body>
    <h2>Text-align-last property example</h2>
    <h3>text-align-last: end:</h3>
    <div class="demo">
      <p>
        Lorem Ipsum is 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.
      </p>
      <p>
        Lorem Ipsum is 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.
      </p>
      <p>
        Lorem Ipsum is 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.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
auto	Utilise la valeur de la propriété `text-align`. C'est la valeur par défaut.
left	Aligne la dernière ligne à gauche.
right	Aligne la dernière ligne à 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. À gauche si la direction est de gauche à droite, à droite si la direction est de droite à gauche.
end	La dernière ligne est alignée à la fin de la ligne. À droite si la direction est de gauche à droite, à gauche si la direction est de droite à gauche.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété 'text-align-last' en CSS ?

Elle est utilisée pour définir l'alignement de la dernière ligne d'un bloc ou d'une ligne juste avant un saut de ligne forcé lorsque 'text-align' vaut 'justify'.Elle est utilisée pour modifier la couleur du texte.Elle est utilisée pour ajuster la taille de police du texte.Elle contrôle l'alignement de la dernière ligne du bloc de texte.

Propriétés associées

text-align — aligne toutes les lignes d'un bloc de texte.
text-justify — contrôle la façon dont l'espace est distribué lorsque le texte est justifié.
direction — définit la direction du texte, ce qui détermine ce que signifient start et end.