text-align justify not working

问题

I'm trying to justify the text within this p tag so that it perfectly fits the width of the 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>

but the text just wont justify! any idea why?

thanks for any help.

回答1:

You can use the solution described here: http://blog.vjeux.com/2011/css/css-one-line-justify.html

This will justify a single line but adds a space after, so if you know the height, you can specify it with overflow:hidden to conceal it and still get the 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>

回答2:

If your text doesn't span more than one line, justifying doesn't do anything. Your text has to wrap to the next line, and then the FIRST line will be justified, but not the second.

回答3:

If you wanted to justify four words in 487px you could try using word-spacing in your css.

I used word-spacing:8em; for bla bla bla bla but you could adjust as necessary.

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

回答4:

Chrome doesn't support it but in Firefox and IE, you can use text-align-last: justify;. For a cross-browser solution, we have to use what @onemanarmy posted ;)

回答5:

try this

for div

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

回答6:

There is also something similar, like display: flex; justify-content: space-around; if you would wrap those texts in spans or divs

回答7:

In my case for < p > tag, works with easy way:

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

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

回答8:

You better try

style="text-align:justifty;display:inline-block;"

回答9:

Just use style="text-align:justify".
It works in all browsers.

来源：https://stackoverflow.com/questions/6228347/text-align-justify-not-working

标签

html

css

text-alignment