Justifier la dernière ligne d'un div?

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/

Cette méthode a fonctionné pour moi:

Cette astuce est appelé "Ben Justification" ^*

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 traité 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

Disons que je travaille avec les divisions que "pour une raison quelconque (il y a une bonne raison) peut avoir une seule ligne....et je tiens à les justifier.

Pourquoi n'utilisez-vous pas text-align: justify;? Il n'justifier chaque ligne. Même si il n'y a qu'une seule ligne.

Modifier: je pense que vous êtes à la recherche pour cette, comme scragz dit. De toute façon, cela ne fonctionne que sous IE 5.5 et IE 6.

J'ai eu un problème où certaines des réponses ci-dessus, travaillé, mais a ajouté un visible nouvelle ligne à la fin - ce qui est inacceptable, parce que la boîte avait une couleur d'arrière-plan. Je fixe la justification avec le code ci-dessous:

jQuery:

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML:

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Si la fermeture de balise div est suivi par un saut de ligne ou si la balise div qui rend l'utilisation de l'équivalent d'un remplissage en bas/de la marge, alors vous pouvez simplement le remplacer par une dernière ligne invisible des espaces insécables comme ceci:

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Même si cela peut ne pas être la plus belle solution, c'est probablement le plus sûr de la croix-navigateur solution, car il ne repose pas sur n'importe quel type de non-standard tweak. Assurez-vous juste qu'il y a assez de "nbsp" caractères à toujours provoquer un saut de ligne tout en gardant à l'intérieur d'une marge sûre de le maximum autorisé sur une seule ligne.

Pour lesquelles on voudrait cela, eh bien, je peux donner ma propre justification à qui il pourrait être d'intérêt; il y a des situations où vous souhaitez diviser en continu un bloc de texte ou un paragraphe de texte pour insérer des images, des tableaux ou, comme dans mon cas personnalisée notes de bas de page à droite avant un saut de page. Si vous le faites, alors vous voulez la dernière ligne droite avant la pause, pour être justifié, comme le texte reprend juste après l'arbitraire de la pause. Dans mon cas, les notes de bas de page sont de longueur variable, de sorte que j'ai de les entrer manuellement, et donc j'ai aussi besoin d'manuellement diviser le bloc de texte et de forcer manuellement l'alignement de la dernière ligne avant la pause. Je ne suis pas au courant de tout automatisé solution est également compatible avec tous les navigateurs, mais l'ajout d'un tas d'espaces insécables fait le travail pour moi au moins...