Text-align-last - Astuces CSS

Anonim

text-align-lastvous permet de contrôler l'alignement de la dernière (ou seule) ligne de texte juste avant un saut de ligne forcé - par exemple la fin d'un paragraphe ou la ligne juste avant une
balise.

.intro-graph ( text-align-last: center; )

Au moment d'écrire ces lignes, seuls les navigateurs Mozilla et Internet Explorer prennent en charge text-align-last(avec les préfixes de fournisseur), et chacun a une implémentation légèrement différente. La propriété était censée commencer à fonctionner dans Chrome 35, mais à partir de Chrome 40, elle nécessite toujours l'indicateur de plates-formes Web expérimentales. Plus de détails sur les implémentations de navigateur dans les points d'intérêt.

Valeurs

  • left aligne la dernière ligne de texte à gauche du conteneur.
  • rightaligne la dernière ligne de texte à droite du conteneur.
  • center centre la dernière ligne de texte dans le conteneur.
  • justify justifie la dernière ligne de texte pour qu'elle couvre toute la largeur du conteneur, en insérant un espace entre les mots si nécessaire pour augmenter la longueur de la ligne.
  • startaligne le texte sur le «début» de la ligne en fonction directiondu texte - à gauche pour les langues LTR, à droite pour les langues RTL.
  • endaligne la dernière ligne sur la «fin» de la ligne en fonction directiondu texte - à droite pour les langues LTR, à gauche pour les langues RTL.
  • autole défaut. Aligne la dernière ligne de texte pour correspondre à la text-alignpropriété de l'élément , si elle est définie. S'il n'est pas défini, autoaligne le texte au début.
  • inheritapplique la text-align-lastpropriété de l'élément parent.

Démo

Cette démo montre les différentes text-align-lastvaleurs en action. Remarque: Internet Explorer ne prend pas en charge les valeurs startou end.

Voir le Pen text-align-last par CSS-Tricks (@ css-tricks) sur CodePen.

Points d'interêts

Dans Internet Explorer, text-align-lastne fonctionne que lorsque le text-alignreste du texte de l'élément sélectionné est défini sur justify. En outre, IE ne reconnaît pas la valeur startou end.

Dans les navigateurs Mozilla, text-align-lastfonctionnera sur la dernière ligne avant un saut de ligne forcé même s'il n'y a pas d'alignement spécifié pour le reste du texte dans l'élément.

Il est également intéressant de savoir que text-align-lastdéfinit l'alignement de toutes les dernières lignes de l'élément sélectionné, pas seulement de la dernière ligne de texte absolue. Ainsi, par exemple, si vous avez un divavec cinq paragraphes, votre text-align-lastdéclaration s'appliquera à la dernière ligne de chacun des paragraphes.

Si vous souhaitez utiliser text-align-lastuniquement sur la toute dernière ligne du conteneur, vous pourrez peut-être utiliser :last-childou :last-of-type. Votre CSS ressemblerait à ceci:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Dans la démo ci-dessous, le côté gauche montre text-align-last: center;appliqué à un div avec plusieurs paragraphes à l'intérieur. Notez que la dernière ligne de chaque paragraphe est centrée. Le côté droit montre text-align-last: center;appliqué uniquement au dernier paragraphe à l'intérieur du div en utilisant :last-child.

Voir le Pen text-align-last par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

  • texte-align
  • retrait du texte

Plus d'information

  • text-align-last dans le module de texte CSS niveau 3 (W3C)
  • text-align-last chez MDN
  • text-align-last sur MSDN
  • text-align-last sur le blog de l'équipe de la plateforme Web d'Adobe
  • Webkit Bug 76173, concernant la mise en œuvre de Chrome de text-align-last

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
35+ avec des drapeaux expérimentaux non 34+ (préfixé) non 5.5+ (préfixé) non non