oujood.com

Guide complet de la propriété CSS text-align-last : utilisez-la pour un alignement précis !

Obtenez un contrôle total sur l'alignement du dernier élément de vos blocs de texte avec la propriété text-align-last en CSS. Suivez notre tutoriel pour apprendre à l'utiliser efficacement et découvrez des astuces pour optimiser vos mises en page.

chercher |

Tutoriel sur la propriété CSS text-align-last: Définition

La propriété CSS text-align-last spécifie l'alignement du dernier élément d'une ligne de texte dans un bloc.

Syntaxe générale de la propriété CSS text-align-last

La syntaxe générale de la propriété text-align-last est la suivante :

selector {
  text-align-last: value;
}
Valeurs par défautauto
Inherited: oui
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.textAlignLast="right"

Valeurs possibles de la propriété CSS text-align-last

  • auto: L'alignement est déterminé par la valeur de la propriété text-align appliquée à l'élément.
  • start: Aligne le dernier élément à gauche.
  • end: Aligne le dernier élément à droite.
  • left: Aligne le dernier élément à gauche.
  • right: Aligne le dernier élément à droite.
  • center: Centre le dernier élément.
  • justify: Justifie le dernier élément.
  • match-parent: L'alignement est hérité du parent.

Exemples pratiques d'utilisation de la propriété CSS text-align-last

Cet exemple montre les différentes valeurs d'alignement de texte en action. Remarque : Internet Explorer ne prend pas en charge les valeurs de début et de fin.

Exemple :       Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-align-last css</title> 
<style>
#left { 
  -ms-text-align-last: left;
  -moz-text-align-last: left;
  text-align-last: left; 
}

#right { 
  -ms-text-align-last: right;
  -moz-text-align-last: right;
  text-align-last: right; 
}

#center { 
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  text-align-last: center;
}

#justify { 
  -ms-text-align-last: justify;
  -moz-text-align-last: justify;
  text-align-last: justify; 
}

#start { 
  /* IE does not recognize text-align-last: start; */
  -moz-text-align-last: start;
  text-align-last: start; 
}

#end { 
  /* IE does not recognize text-align-last: end; */
  -moz-text-align-last: end;
  text-align-last: end; 
}


/* styling for Pen, unrelated to text-align-last */

body { font-family: sans-serif; }

div {
  width: 40%;
  padding: 2%;
  line-height: 1.2;
  border: 5px solid #E18728;
  text-align: justify;
  float: left;
  margin: 1%;
}
</style>
</head>
<body>

<h1>La propriété css text-align-last </h1> <br>
<div id="left">
<h2>text-align-last: left; </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>
<div id="right">
<h2>text-align-last: right; </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>

<div id="center">
<h2>text-align-last: center;</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>

<div id="justify">
<h2>text-align-last: justify;</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>

<div id="start">
<h2>text-align-last: start;</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>
<div id="end">
<h2>text-align-last: end;</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus mauris, blandit vitae auctor id, rhoncus id eros. Nullam sit amet nulla ac sapien eleifend ultrices. Curabitur ac dictum metus. Pellentesque ullamcorper dolor sit amet mi imperdiet egestas. Nam eu tellus sed nibh tincidunt rutrum eu sed augue. Cras vestibulum elementum tortor in gravida. Sed augue risus, tempor in justo non, fermentum faucibus nibh.</p>
</div>
</body>
</html>

Exemple 2

Dans l’exemple ci-dessous, nous avons deux div avec plusieurs paragraphe chacun, pour la div côté gauche la propriété css text-align-last est appliqué, la dernière ligne de chaque paragraphe est centrée. Pour la div côté droit la propriété css text-align-last s'applique uniquement au dernier paragraphe de la div en utilisant :last-child .

Exemple :       Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-align-last css</title> 
<style>
#center, #center-last {
  float: left;
  width: 40%;
  padding: 2%;
  margin-right: 1%;
  line-height: 1.2;
  border: 5px solid #E18728;
  text-align: justify;
}

#center {
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  text-align-last: center;
}

#center-last p:last-child {
   -ms-text-align-last: center;
  -moz-text-align-last: center;
  text-align-last: center;

}

/* styling for Pen, unrelated to text-align-last */

body {
  width: 90%;
  margin: 1em auto;
  font-family: sans-serif;
}

h2, h3 { text-align: center; }

</style>
</head>
<body>

<h1>La propriété css text-align-last </h1> <br>
<div id="center">
  <h2>text-align-last: center;</h2>
  <h3>applied to entire div</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veniam soluta reiciendis iure molestiae perspiciatis ut magnam est nemo, quidem, esse, officia mollitia voluptate. Aspernatur rerum omnis similique repudiandae eos.</p>
  <p>Deleniti soluta laboriosam quidem quia perferendis, beatae quisquam consectetur veritatis, dicta porro, molestias nulla illo doloremque quos, recusandae voluptatibus cupiditate repellendus cumque rem. Nesciunt cum nobis ipsum qui, odit eos.</p>
  <p>Dolor perspiciatis recusandae accusantium quam doloremque placeat repellendus nemo libero, non a sit iste aspernatur, ex, numquam commodi distinctio laboriosam aperiam! Labore nam repudiandae ut, dolor facere ipsum numquam enim.</p>
  <p>Maxime eum esse repellendus fuga, culpa sapiente mollitia architecto odit, ipsam voluptatem. Perspiciatis voluptate illum exercitationem, inventore labore vero consequatur dolorem fuga, nihil. Amet, laudantium, delectus. Id, eligendi inventore eum.</p>
  <p>Unde fugiat, ab facilis porro quidem voluptatem mollitia doloremque! Obcaecati aspernatur esse, excepturi perferendis? Vero ex, rem unde id? Vel quasi quo aperiam. Dolor distinctio assumenda.</p>
</div>

<div id="center-last">
  <h2>text-align-last: center;</h2>
  <h3>on :last-child only</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veniam soluta reiciendis iure molestiae perspiciatis ut magnam est nemo, quidem, esse, officia mollitia voluptate. Aspernatur rerum omnis similique repudiandae eos.</p>
  <p>Deleniti soluta laboriosam quidem quia perferendis, beatae quisquam consectetur veritatis, dicta porro, molestias nulla illo doloremque quos, recusandae voluptatibus cupiditate repellendus cumque rem. Nesciunt cum nobis ipsum qui, odit eos.</p>
  <p>Dolor perspiciatis recusandae accusantium quam doloremque placeat repellendus nemo libero, non a sit iste aspernatur, ex, numquam commodi distinctio laboriosam aperiam! Labore nam repudiandae ut, dolor facere ipsum numquam enim.</p>
  <p>Maxime eum esse repellendus fuga, culpa sapiente mollitia architecto odit, ipsam voluptatem. Perspiciatis voluptate illum exercitationem, inventore labore vero consequatur dolorem fuga, nihil. Amet, laudantium, delectus. Id, eligendi inventore eum.</p>
  <p>Unde fugiat, ab facilis porro quidem voluptatem mollitia doloremque! Obcaecati aspernatur esse, excepturi perferendis? Vero ex, rem unde id? Vel quasi quo aperiam. Dolor distinctio assumenda.</p>
</div>

</body>
</html>

Astuces et conseils d'utilisation de la propriété CSS text-align-last

  • La propriété text-align-last est utile lorsque vous avez un bloc de texte avec plusieurs paragraphes et que vous souhaitez contrôler l'alignement du dernier paragraphe de chaque ligne.
  • L'utilisation de la valeur justify permet de justifier le dernier élément d'une ligne, créant ainsi un alignement uniforme des mots sur toute la largeur du bloc.
  • Il est important de noter que la propriété text-align-last n'affecte que le dernier élément d'une ligne. Les autres éléments seront alignés en fonction de la propriété text-align appliquée à l'élément.
  • La valeur match-parent permet d'hériter de l'alignement défini par le parent. Cela peut être utile lorsque vous souhaitez que le dernier élément suive l'alignement global du bloc.
  • La propriété text-align-last fonctionne généralement sur les éléments de bloc tels que les paragraphes (<p>) et les divs (<div>). Assurez-vous que l'élément cible dispose d'un espace suffisant pour afficher le dernier élément aligné correctement.

Conclusion

La propriété CSS text-align-last offre un contrôle précis sur l'alignement du dernier élément d'une ligne de texte dans un bloc. En utilisant les différentes valeurs possibles, vous pouvez ajuster l'alignement en fonction de vos besoins spécifiques. Expérimentez avec cette propriété pour obtenir le résultat souhaité dans vos mises en page.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion47.0 5.5 49.0
12.0 -moz-
N'est pas supporté 34.0


Voir aussi nos tutoriel :

Balise élément de lisste dl

Définit une liste de définitions

fonction similar_text

Calcule la similarit de deux chaînes

dessiner avec php

La librairie GD introduction