Justifier la dernière ligne d'un div?

Question

Je ne pense pas que le "pourquoi?" de cette question est importante...mais ce dont j'ai besoin pour faire est d' text-align:justify de la dernière ligne de texte dans un DIV. Normalement, la dernière ligne (ou le premier si il n'y a pas d'autres lignes, ce qui est le cas actuel) d'une div n'est pas justifié, mais aligné à gauche. Je sais qu'il n'aurait pas de sens du tout, mais j'ai absolument besoin de la dernière ligne pour être justifié!

Answer 1

Voici un cross-browser méthode qui fonctionne dans IE6+

Il combine text-align-last: justifier; qui est pris en charge par IE, et une variation de l' :après le pseudo-contenu de la méthode. Il inclut un correctif pour supprimer l'espace supplémentaire ajouté après une ligne de texte des éléments.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

Si vous avez une ligne de texte, utilisez cette option pour empêcher la ligne vide au-dessus de la CSS va provoquer

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

Plus de détails: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

Answer 2

C'est le plus propre hack je pouvais trouver/trouver. Votre kilométrage peut varier.

J'ai testé mon exemple dans IE8, Firefox, Chrome, Opera, Safari.

IE7 ne pas mettre en œuvre l' :after pseudo-classe, afin de ne pas y travailler.

Si vous avez besoin d'IE7 soutien, il serait sans doute travailler à coller l' " ___" à l'intérieur d'un parasite span à la fin de l' div (utiliser JS?).

Démonstration en direct (voir le code)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

Malheureusement, il semble faire l' div une ligne plus haut qu'il ne devrait l'être.

Answer 3

Cette méthode a fonctionné pour moi:

Cette astuce est appelé "Ben Justification" ^*

Eh bien, ce n'est pas tout à fait tous avec css, vous devez ajouter un petit plus à la fin de la ligne. Le balisage de la rubrique ci-dessus est...

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

Le petit plus à la fin de la ligne déclenche la justification de la ligne par le démarrage d'une nouvelle ligne. Le contenu supplémentaire (<span> &nbsp;</span>) est forcé sur une nouvelle ligne parce que l'espace est fait 1000px de large (avec word-spacing) et   est considéré comme un mot. La ligne supplémentaire ne s'affiche pas parce que la taille de la police est fixé à 0px.

Mise à jour, 23-Jan-11: j'ai juste mis à jour le balisage pour inclure un espace après le à l'intérieur de la plage et du réglage de la taille de la police de 1px pour la durée: cela est nécessaire pour IE8. Grâce à Mamoun Gadir pour souligner IE problèmes.

Le css pour le titre ci-dessus est...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}

^* À moins que la preuve démontre que cette technique a été publié avant, je, soussigné, nom de cette technique "Ben Justification" et déclarer qu'il est libre pour tous à utiliser.

Ben Argile, Janv 2010.

Source: http://www.evolutioncomputing.co.uk/technical-1001.html

Answer 4

CSS3 offre une solution pour cela sous la forme d' text-align-last, voir http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

Answer 5

Il y a un CSS3 IE 5.5/6 (merci, CSS3.com, PAS!) propriété appelée text-justify qui peut faire ce que vous voulez avec:

text-justify: distribute-all-lines;

Pas sûr de prise en charge du navigateur. Ce une arnaque.