web-dev-qa-db-fra.com

text-align justifier ne fonctionne pas

J'essaie de justifier le texte dans cette balise p afin qu'il corresponde parfaitement à la largeur de la p.

<p align="justify" style="text-align: justify !important; color:#fff; margin:0px; font-weight:bold; width:487px; border:Solid 1px red;">blah blah blah</p>

mais le texte ne justifie pas! une idée pourquoi? 

merci pour toute aide.

htmlcsstext-alignment
25
phil

Vous pouvez utiliser la solution décrite ici: http://blog.vjeux.com/2011/css/css-one-line-justify.html

Cela justifiera une seule ligne mais ajoutera un espace après. Ainsi, si vous connaissez la hauteur, vous pouvez le spécifier avec overflow:hidden pour la masquer tout en obtenant la justification.

.fulljustify {
    	text-align:justify;
    }
    .fulljustify:after {
        content: "";
        display: inline-block;
        width: 100%;	
    }
    #tagline {
        height: 80px;
        overflow: hidden;
        line-height: 80px; /* vert-center */
    }
<p id="tagline" class="fulljustify">Blah blah blah</p>

33
manafire

Si votre texte ne couvre pas plus d'une ligne, justifier ne fait rien. Votre texte doit être renvoyé à la ligne suivante. La première ligne sera alors justifiée, mais pas la seconde.

29
Brett

Si vous voulez justifier quatre mots dans 487px, essayez d’utiliser Word-spacing dans votre css.

J'ai utilisé Word-spacing:8em; pour bla bla bla bla mais vous pouvez ajuster si nécessaire.

http://jsfiddle.net/5RpQr/1/

6
Jason Gennaro

Chrome ne le prend pas en charge, mais dans Firefox et IE, vous pouvez utiliser text-align-last: justify;. Pour une solution multi-navigateur, nous devons utiliser ce que @onemanarmy a posté;)

5
alijsh

essaye ça

pour div

div {
text-align:justify;
text-justify: inter-Word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}
4
venkat

Il y a aussi quelque chose de similaire, comme display: flex; justifier-contenu: espace-autour; si vous voulez envelopper ces textes en étendues ou divs

0
WoodyDRN

Dans mon cas pour la balise <p>, fonctionne de manière simple:

p {
  text-align: justify;
  text-justify: inter-Word;
}

https://css-tricks.com/almanac/properties/t/text-justify/

0
Navruz