text-align justify not working

Question

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.

Answer 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>

Answer 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.

Answer 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/

Answer 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 ;)

Answer 5

try this

for div

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

Answer 6

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

Answer 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/

Answer 8

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

Answer 9

You better try

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