Justifier la dernière ligne d'un div?
Je ne pense pas que le "pourquoi?" de cette question est importante ... mais ce que je dois faire est de text-align:justify la dernière ligne de texte d'unDIV. Normalement, la dernière ligne (ou la première s'il n'y a pas d'autres lignes, ce qui est le cas actuel) d'un div n'est pas justifiée, mais alignée à gauche. Je sais que cela n’a aucun sens, mais j’ai absolument besoin que la dernière ligne soit justifiée!
Voici une méthode multi-navigateurs qui fonctionne dans IE6 +
Il combine text-align-last: justifier; qui est supporté par IE et une variante de la méthode de pseudo-contenu: after. Il inclut un correctif pour supprimer l’espace supplémentaire ajouté après les éléments de texte d’une ligne.
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 ceci pour empêcher la ligne vide que le CSS ci-dessus causera
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-last-line-text-text/
C'est le hack le plus propre que j'ai pu trouver/trouver. Votre kilométrage peut varier.
J'ai testé mon exemple dans IE8, Firefox, Chrome, Opera, Safari.
IE7 n'implémente pas la pseudo-classe :after; elle ne fonctionnera donc pas dans cette zone.
Si vous avez besoin du support IE7, il serait probablement utile de coller le " ___" à l'intérieur d'une span superflue à la fin de la div (utilisez 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 que la div soit une ligne plus haute que nécessaire.
Cette méthode a fonctionné pour moi:
Cette astuce s'appelle "Ben Justification" *
Eh bien, ce n’est pas tout à fait avec les CSS, vous devez ajouter un petit extra à la fin de la ligne. Le balisage pour la rubrique ci-dessus est ...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
Le petit ajout en fin de ligne déclenche la justification de la ligne en commençant une nouvelle ligne. Le contenu supplémentaire (<span> </span>) est forcé sur une nouvelle ligne car l'espace est élargi à 1000 pixels de large (avec un espacement entre les mots) et est traité comme un mot. La ligne supplémentaire ne s'affiche pas car la taille de la police est définie sur 0px.
Update, 23-Jan-11: Je viens de mettre à jour le balisage pour inclure un espace après l'intervalle et définir la taille de la police à 1px pour l'étendue: cela est nécessaire pour IE8. Merci à Mamoun Gadir d'avoir signalé les problèmes d'IE.
Le css pour la rubrique 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 déjà été publiée, je la nomme "Ben Justification" et la déclare libre d'utilisation.
Ben Clay, janvier 2010.
Source: http://www.evolutioncomputing.co.uk/technical-1001.html
CSS3 offre une solution à cela sous la forme de text-align-last, voir http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last
Disons que je travaille avec des divs qui "pour une raison quelconque" (il en existe une très bonne) ne peuvent avoir qu'une seule ligne ... et je veux les justifier.
Pourquoi n'utilisez-vous pas text-align: justify;? Cela justifie chaque ligne. Même s'il n'y a qu'une seule ligne.
Edit: Je pense que vous recherchez this , comme dit Scragz. Quoi qu'il en soit, cela ne fonctionne que dans IE 5.5 et IE 6.
J'ai eu un problème où certaines des réponses ci-dessus ont fonctionné, mais j'ai ajouté une nouvelle ligne visible en bas - ce qui était inacceptable, car la boîte avait une couleur de fond. J'ai corrigé 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>
Il y a un CSS3 IE 5.5/6 (merci, CSS3.com , NOT!) Propriété appelée text-justify qui peut faire ce que vous voulez avec:
text-justify: distribute-all-lines;
Pas sûr du support du navigateur. Quelle arnaque.
Lorsque! DOCTYPE est au format HTML5, les solutions de Kristin et de Jacqui provoquent une nouvelle ligne supplémentaire, difficile à supprimer. Si cela vous dérange (comme moi), Voici encore une autre idée:
<div style="display: flex;">
Lorem <span style="flex:1;"></span>
ipsum <span style="flex:1;"></span>
dolor <span style="flex:1;"></span>
sit...
</div>
Il présente un autre inconvénient: ne fonctionne que pour le texte d’une seule ligne et nécessite une modification du contenu comme indiqué ci-dessus, ce qui n’est pas toujours possible. Mais il y a des situations où ce n'est pas un problème (comme dans mon cas). Il peut même être utile d’avoir un contrôle sur les positions où l’espace supplémentaire sera inséré. Les styles sont en ligne par souci de brièveté, bien sûr ... Je l’ai testé uniquement avec FFox/IE récent.
Si la balise div de clôture est suivie d'un saut de ligne ou utilise une marge/marge de remplissage équivalente, vous pouvez simplement la remplacer par une dernière ligne invisible d'espaces insécables, tels que:
<div>This last line is now for all intents and purposes justified </div>
Bien que ce ne soit peut-être pas la solution la plus jolie, il s'agit probablement de la solution multi-navigateurs la plus sûre, car elle ne repose sur aucun type de Tweak non standard. Assurez-vous simplement qu'il y a suffisamment de "nbsp" caractères pour toujours provoquer un saut de ligne tout en restant dans les limites du maximum autorisé sur une seule ligne.
Quant à savoir pourquoi on voudrait cela, eh bien, je peux donner mon propre raisonnement à qui de droit. il existe des situations dans lesquelles vous souhaitez diviser un bloc de texte continu ou un paragraphe de texte afin d'insérer des images, des tableaux ou, comme dans mon cas, des notes de bas de page personnalisées juste avant un saut de page. Si vous faites cela, alors vous voulez que la dernière ligne juste avant la pause soit justifiée car le texte reprendra juste après la pause arbitraire. Dans mon cas, les notes de bas de page sont de longueur variable, je dois donc les saisir manuellement. Par conséquent, je dois également diviser manuellement le bloc de texte et forcer manuellement l'alignement de la dernière ligne avant la pause. Je ne connais aucune solution automatisée compatible avec tous les navigateurs, mais ajouter un tas d'espaces insécables fait au moins le travail pour moi ...