Définit une liste de définitions
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.
La propriété CSS text-align-last spécifie l'alignement du dernier élément d'une ligne de texte dans un bloc.
La syntaxe générale de la propriété text-align-last est la suivante :
selector { text-align-last: value; }
Valeurs par défaut | auto |
---|---|
Inherited: | oui |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.textAlignLast="right" |
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>
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>
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.
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.
Explorateur | |||||
---|---|---|---|---|---|
Verssion | 47.0 | 5.5 | 49.0 12.0 -moz- | N'est pas supporté | 34.0 |