text-align:justify sur derniere ligne et centrage de boites

A quoi sert text-align:justify;

Dans un texte, le nombre de mots et leur nombre de lettre varient et sont a même distance des un des autres, la longeur de chaque ligne peut varier.

justify, compense cette différence en plaçant le premier et dernier mot de chaque ligne aux extrémités en adaptant l'espacement entre les mot pour remplir la ligne de façon homogène.Cela s'appelle justifier le texte.

La dernière ligne, pouvant contenir peu de mot, garde un comportement non justifier.

Ça marche bien, pourquoi forcé la dernière ligne ?

Cette derniere ligne pourrait:

  • - être rempli a 80 ou 90% et justifié sans nuire a sa lisibilité
  • - être une seule ligne comportant des images ou des liens
  • être une ligne avec un mot a gauche et une image a droite que l'on veut a droite et que l'on ne peut pas mettre en flottant
  • etc ...

Comment ?

Pour que le texte soit justifié sur la dernière ligne, il ne faut pas que celle-ci soit la dernière, nous en ajoutons donc une avec :after qui permet d'injecter cette nouvelle et dernière ligne.

Testons voir

Les styles utiles a cet effet :

[selecteur]:after {
content:'';
display:inline-block;
width:100%;
}

La ligne ajouté est visualisée par une bordure jaune.

Ce qui donne :

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Le resultat n'est pas terrible.

Modulons en injectant des portions de lignes de longueurs différentes

redimensionnez votre navigateur en largeur pour tester les différents résultats.

50%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

25%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

10%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Ce dernier conditionnant la justification à 90% de remplissage n'est pas mauvaise, a moins , c'est désastreux. On peut y trouver une utilité.

une technique de centrage horizontal justifié

Interactions possibles avec des éléments de type inline-block

un mot et une image.

Orchidé une fleur

des images

une fleur une fleur une fleur une fleur

Des boites

un titre sur
2 lignes

un paragraphe a 50% de largeur de la boite , Curabitur accumsan viverra libero

une fleur

Une liste de liens :

Conclusion

text-align:justify et :after peuvent servir a mettre en place une technique de centrage horizontal justifié. en attendant que {flex:justify;} soit utilisable dans nos futur navigateur.

Ecrire un commentaire




Quelle est la dernière lettre du mot aooo ?